:root { --bg: #060912; --bg2: #0a0f1e; --surface: #0f1626; --surface2: #141d33; --border: rgba(125,145,210,.10); --border-strong: rgba(125,145,210,.22); --text: #eaf0fb; --muted: #9aa6c0; --dim: #646f8a; --cyan: #34e7d0; --purple: #8b6dff; --amber: #ffbe5c; --green: #37e08a; --red: #ff6072; --blue: #56b0ff; --shadow: 0 10px 40px -12px rgba(0,0,0,.55); --mesh-a: rgba(139,109,255,.14); --mesh-b: rgba(52,231,208,.09); --grid-line: rgba(125,145,210,.045); --nav-bg: rgba(6,9,18,.86); --modal-bg: linear-gradient(180deg, rgba(20,29,51,.98), rgba(10,16,30,.98)); --card-bg: linear-gradient(180deg, rgba(20,29,51,.55), rgba(15,22,38,.55)); --input-bg: linear-gradient(180deg, rgba(10,18,34,.75), rgba(8,14,28,.75)); --primary-bg: linear-gradient(180deg, var(--cyan), #23c9b6); --on-accent: #06121a; --overlay-bg: rgba(4,8,18,.82); --grid-opacity: .22; --font-ui: "SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --radius-card: 16px; --radius-control: 11px; --icon-chip: #ffffff; } :root[data-theme="aurora"] { --bg: #050907; --bg2: #0a120f; --surface: #0d1712; --surface2: #122218; --border: rgba(111,255,156,.22); --border-strong: rgba(111,255,156,.46); --text: #e4ffed; --muted: #8cbca0; --dim: #5f886f; --cyan: #64ff9b; --purple: #5be7ff; --amber: #ffd166; --green: #7dffa5; --red: #ff6b7a; --blue: #63d5ff; --shadow: 0 14px 40px -20px rgba(0,0,0,.9); --mesh-a: rgba(100,255,155,.07); --mesh-b: rgba(91,231,255,.05); --grid-line: rgba(111,255,156,.11); --nav-bg: rgba(5,9,7,.94); --modal-bg: #0b1610; --card-bg: #0d1712; --input-bg: #050b08; --primary-bg: var(--cyan); --on-accent: #041008; --overlay-bg: rgba(0,4,2,.86); --grid-opacity: .42; --font-ui: "SFMono-Regular","Cascadia Code",ui-monospace,Menlo,Consolas,"PingFang SC",sans-serif; --radius-card: 3px; --radius-control: 2px; } :root[data-theme="ember"] { --bg: #091525; --bg2: #10243a; --surface: #162f49; --surface2: #1d3d59; --border: rgba(172,204,220,.19); --border-strong: rgba(172,204,220,.38); --text: #edf6f8; --muted: #abc1ca; --dim: #7895a1; --cyan: #69d5d1; --purple: #91b7eb; --amber: #f3bd57; --green: #74d39c; --red: #ee7783; --blue: #73b9e8; --shadow: 0 18px 42px -22px rgba(0,8,19,.84); --mesh-a: rgba(105,213,209,.10); --mesh-b: rgba(243,189,87,.08); --grid-line: rgba(172,204,220,.075); --nav-bg: rgba(9,21,37,.94); --modal-bg: linear-gradient(160deg, #1b3955, #10283f); --card-bg: linear-gradient(160deg, #1b3853, #142d46); --input-bg: #0e2136; --primary-bg: linear-gradient(135deg, #f3bd57, #d9963e); --on-accent: #211707; --overlay-bg: rgba(4,13,26,.84); --grid-opacity: .24; --font-ui: "IBM Plex Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --radius-card: 6px; --radius-control: 5px; } :root[data-theme="light"] { --bg: #e6efec; --bg2: #d7e5df; --surface: #f7fbf8; --surface2: #e8f1ed; --border: rgba(28,91,86,.19); --border-strong: rgba(28,91,86,.38); --text: #173d3d; --muted: #58716e; --dim: #7b9892; --cyan: #0c7f79; --purple: #5f6fb2; --amber: #a8652a; --green: #1c7551; --red: #ad4352; --blue: #3c6f9b; --tag-hot: #963347; --tag-cool: #2f6090; --tag-positive: #17633f; --tag-accent: #5d4b94; --tag-sector: #246776; --tag-warm: #8b5b20; --shadow: 0 16px 34px -22px rgba(27,91,85,.42); --mesh-a: rgba(12,127,121,.10); --mesh-b: rgba(95,111,178,.075); --grid-line: rgba(28,91,86,.075); --nav-bg: rgba(244,250,247,.94); --modal-bg: linear-gradient(145deg, #f8fcf9, #eaf4ef); --card-bg: linear-gradient(145deg, #fbfefc, #edf6f1); --input-bg: #d9e9e2; --primary-bg: linear-gradient(135deg, #15918a, #086e6b); --on-accent: #ffffff; --overlay-bg: rgba(17,62,62,.28); --grid-opacity: .15; --font-ui: "Avenir Next","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --radius-card: 12px; --radius-control: 7px; } :root[data-theme="mist"] { --bg: #073b4c; --bg2: #0d5263; --surface: #126579; --surface2: #19788a; --border: rgba(160,229,224,.20); --border-strong: rgba(255,154,118,.58); --text: #ebfbfa; --muted: #acd9d7; --dim: #7db5b6; --cyan: #ff9a76; --purple: #a7b8f4; --amber: #ffd166; --green: #75d6a3; --red: #ff7785; --blue: #75d8ee; --shadow: 0 20px 48px -22px rgba(0,16,25,.82); --mesh-a: rgba(117,216,238,.13); --mesh-b: rgba(255,154,118,.10); --grid-line: rgba(160,229,224,.09); --nav-bg: rgba(7,59,76,.94); --modal-bg: linear-gradient(150deg, #176f80, #0e5265); --card-bg: linear-gradient(150deg, #176f80, #105d6f); --input-bg: #063b4c; --primary-bg: linear-gradient(135deg, #ffad88, #f17b62); --on-accent: #32150f; --overlay-bg: rgba(2,28,39,.84); --grid-opacity: .22; --font-ui: "Nunito Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif; --radius-card: 18px; --radius-control: 12px; } :root[data-theme="graphite"] { --bg: #1b0c17; --bg2: #2a1221; --surface: #3a1b2e; --surface2: #4b2435; --border: rgba(246,210,179,.22); --border-strong: rgba(227,154,101,.50); --text: #fff0e7; --muted: #d1b8b2; --dim: #aa888c; --cyan: #e39a65; --purple: #d6a6c8; --amber: #f0c369; --green: #83d5a2; --red: #f28393; --blue: #9bc9eb; --shadow: 0 22px 52px -24px rgba(7,0,4,.88); --mesh-a: rgba(227,154,101,.13); --mesh-b: rgba(214,166,200,.09); --grid-line: rgba(246,210,179,.075); --nav-bg: rgba(27,12,23,.96); --modal-bg: linear-gradient(145deg, #51283b, #351a2a); --card-bg: linear-gradient(145deg, #482338, #351a2b); --input-bg: #21101a; --primary-bg: linear-gradient(135deg, #edaa70, #c8754c); --on-accent: #2b100d; --overlay-bg: rgba(12,2,7,.86); --grid-opacity: .19; --font-ui: "Iowan Old Style","Noto Serif SC","Songti SC",serif; --radius-card: 18px; --radius-control: 9px; } :root[data-theme="cinnabar"] { --bg: #050505; --bg2: #101010; --surface: #151515; --surface2: #202020; --border: rgba(255,255,255,.25); --border-strong: rgba(255,255,255,.68); --text: #ffffff; --muted: #bcbcbc; --dim: #767676; --cyan: #d7ff34; --purple: #ffffff; --amber: #f5f5f5; --green: #9cff57; --red: #ff5a5f; --blue: #a8ddff; --shadow: 0 0 0 transparent; --mesh-a: transparent; --mesh-b: transparent; --grid-line: rgba(255,255,255,.1); --nav-bg: #050505; --modal-bg: #111111; --card-bg: #151515; --input-bg: #050505; --primary-bg: var(--cyan); --on-accent: #050505; --overlay-bg: rgba(0,0,0,.88); --grid-opacity: .28; --font-ui: Arial,"PingFang SC","Microsoft YaHei",sans-serif; --radius-card: 0px; --radius-control: 0px; } :root[data-theme="sand"] { --bg: #e9dfd0; --bg2: #d6c5b2; --surface: #f7efe4; --surface2: #e9dccb; --border: rgba(82,62,42,.23); --border-strong: rgba(82,62,42,.42); --text: #3f3428; --muted: #756554; --dim: #9a8771; --cyan: #9a6043; --purple: #6e668b; --amber: #b46d2e; --green: #4e7656; --red: #a24d43; --blue: #557b88; --tag-hot: #923e42; --tag-cool: #3c6680; --tag-positive: #3f6f4f; --tag-accent: #625a86; --tag-sector: #356977; --tag-warm: #8c632e; --shadow: 3px 4px 0 rgba(91,67,43,.10), 0 16px 30px -22px rgba(75,61,45,.42); --mesh-a: rgba(180,109,46,.10); --mesh-b: rgba(154,96,67,.075); --grid-line: rgba(82,62,42,.075); --nav-bg: rgba(244,236,224,.95); --modal-bg: linear-gradient(180deg, #fbf4e9, #eee1d1); --card-bg: linear-gradient(180deg, #fbf4e9, #efe2d2); --input-bg: #ded0be; --primary-bg: linear-gradient(135deg, #b8744a, #965337); --on-accent: #fffaf2; --overlay-bg: rgba(74,52,34,.30); --grid-opacity: .12; --font-ui: "Noto Serif SC","Songti SC","Iowan Old Style",serif; --radius-card: 4px; --radius-control: 3px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-ui, "SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: rgba(125,145,210,.18); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(125,145,210,.32); } .bg-mesh { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: radial-gradient(1100px 760px at 88% -12%, var(--mesh-a), transparent 60%), radial-gradient(960px 680px at -8% 18%, var(--mesh-b), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); } .grid-overlay { position: fixed; inset: 0; z-index: -1; opacity: var(--grid-opacity); pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 62% 24%, #000, transparent 82%); } /* ---- 启动 splash（防闪屏） ---- */ html.pre-auth #login-page { display: none !important; } #boot-splash { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 18px; } html.pre-auth #boot-splash { display: flex; } .spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(125,145,210,.18); border-top-color: var(--cyan); animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #boot-splash .boot-text { color: var(--muted); font-size: 13px; letter-spacing: 2px; } /* ---- 登录页 ---- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 44px 40px; width: 100%; max-width: 400px; backdrop-filter: blur(14px); text-align: center; box-shadow: var(--shadow); animation: rise .5s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .login-card h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; letter-spacing: .5px; } .login-card p { color: var(--muted); margin-bottom: 24px; font-size: 14px; } .login-card input { width: 100%; padding: 13px 16px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--bg2); color: var(--text); font-size: 14px; outline: none; transition: .2s; } .login-card input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(52,231,208,.15); } .login-card button { width: 100%; padding: 13px; margin-top: 16px; border-radius: 11px; border: none; background: var(--primary-bg); color: var(--on-accent); font-weight: 700; font-size: 15px; cursor: pointer; transition: .25s; } .login-card button:hover { box-shadow: 0 10px 34px -8px color-mix(in srgb, var(--cyan) 45%, transparent); transform: translateY(-2px); } .login-error { color: var(--red); font-size: 13px; margin-top: 10px; display: none; } .login-error.locked { color: var(--amber); border: 1px solid rgba(255,193,7,.28); background: rgba(255,193,7,.06); padding: 8px 10px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; line-height: 1.6; } /* ---- 布局：顶部导航 + 主区 ---- */ .dashboard { display: block; min-height: 100vh; } /* 顶部导航条（菜单始终置顶，水平排布） */ .topnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 10px 22px; background: var(--nav-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; white-space: nowrap; flex-shrink: 0; } .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 2.4s infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } .nav { display: flex; flex-direction: row; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; } .nav-toggle { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; cursor: pointer; font-size: 19px; color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: .2s; } .nav-toggle:hover { border-color: var(--cyan); color: var(--cyan); } .nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px; white-space: nowrap; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 600; transition: .2s; border: 1px solid transparent; flex-shrink: 0; } .nav-item .ico { font-size: 15px; } /* 导航项红点徽标（策略错误监控提醒） */ .nav-badge { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 8px rgba(255,96,114,.55); margin-left: 2px; } .nav-item:hover { color: var(--text); background: color-mix(in srgb, var(--cyan) 6%, var(--surface)); } .nav-item.active { color: var(--text); background: color-mix(in srgb, var(--cyan) 12%, var(--surface)); border-color: color-mix(in srgb, var(--cyan) 35%, var(--border)); } .nav-item.active .ico { filter: drop-shadow(0 0 6px var(--cyan)); } .topnav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .clock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .logout-btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 13px; transition: .2s; white-space: nowrap; } .logout-btn:hover { border-color: var(--red); color: var(--red); } .account-switch { display: flex; align-items: center; gap: 8px; position: relative; } .account-switch #account-switch-trigger { padding: 8px 30px 8px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, var(--surface2), var(--surface)) url("data:image/svg+xml;utf8,") no-repeat right 10px center; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; min-width: 116px; max-width: 180px; appearance: none; -webkit-appearance: none; transition: border-color .18s, box-shadow .18s, color .18s, background .18s; box-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-switch #account-switch-trigger:hover { border-color: var(--cyan); color: var(--cyan); } .account-switch #account-switch-trigger:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(52,231,208,.18); } /* 自定义切换账号弹窗：居中卡片 + 单选列表（手机/桌面统一体验，不会出现 iOS 单选滚轮白版） */ #account-switch-overlay { padding: 20px !important; align-items: center !important; justify-content: center !important; } #account-switch-overlay .modal-box { width: min(92vw, 460px) !important; max-height: min(78dvh, 620px) !important; padding: 16px 18px !important; border-radius: 18px !important; border: 1px solid var(--border-strong); box-shadow: 0 24px 80px rgba(0,0,0,.7); } .as-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .as-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .2px; } .as-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: color .15s, background .15s; } .as-close:hover { color: var(--text); background: rgba(125,145,210,.12); } .as-list { padding: 6px 0 10px; } .as-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; cursor: pointer; transition: background .15s; } .as-item:hover { background: rgba(52,231,208,.08); } .as-item + .as-item { border-top: 1px solid var(--border); border-radius: 12px; margin-top: 2px; } .as-radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; } .as-item.active .as-radio { border-color: var(--cyan); background: radial-gradient(circle, var(--cyan) 0 42%, transparent 44%); } .as-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .2px; } .as-item.active .as-name { color: var(--cyan); } .as-active-tag { font-size: 11px; color: var(--cyan); border: 1px solid rgba(52,231,208,.3); background: rgba(52,231,208,.1); border-radius: 6px; padding: 1px 6px; } .as-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 4px; } .as-foot .pill-btn { width: 100%; min-height: 42px; justify-content: center; display: inline-flex; align-items: center; font-size: 14px; } .llm-model-entry { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .llm-model-entry:hover { border-color: var(--cyan); color: var(--cyan); } /* 系统配置弹窗（全局跨账号配置项，新增配置追加 syscfg-section） */ .syscfg-section { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); margin-bottom: 12px; scroll-margin-top: 88px; } .syscfg-section:last-child { margin-bottom: 0; } .syscfg-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .syscfg-desc { font-size: 12px; color: var(--muted); margin-bottom: 10px; } .syscfg-row { display: flex; align-items: center; gap: 10px; } .syscfg-tip { font-size: 12px; color: var(--muted); margin-top: 8px; } .server-config-list { display: flex; flex-direction: column; gap: 8px; } .server-config-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); } .server-config-row .mini-input { width: 100%; min-width: 0; } @media (max-width: 560px) { .server-config-row { grid-template-columns: 1fr; } .server-config-row .pill-btn { width: 100%; } } /* 🖥️ 服务器管理：卡片网格 + 程序列表（新增置顶 Tab） */ .server-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface2); } .server-toolbar .hint { margin-left: auto; } /* 概览统计 pill：服务器数 / 程序数 / 在线数 */ .srv-stats { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .srv-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); white-space: nowrap; } .srv-stat b { color: var(--text); font-weight: 700; } .srv-stat .srv-stat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); } .srv-stat.is-ok { color: var(--muted); border-color: color-mix(in srgb, var(--green) 40%, transparent); } .srv-stat.is-ok b { color: var(--green); } .srv-stat.is-ok .srv-stat-dot { background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 60%, transparent); } .srv-stat.is-warn { border-color: color-mix(in srgb, var(--amber) 45%, transparent); } .srv-stat.is-warn b { color: var(--amber); } .srv-stat.is-warn .srv-stat-dot { background: var(--amber); } .server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; } .server-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: 0 2px 10px rgba(0,0,0,.16); position: relative; overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s; } .server-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 45%, var(--border-strong)); box-shadow: 0 8px 22px rgba(0,0,0,.24), 0 0 0 1px color-mix(in srgb, var(--cyan) 16%, transparent); } /* 服务器卡片左侧状态色条（按在线率：全绿 / 部分 / 全红） */ .server-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dim); } .server-card.all-online::before { background: var(--green); box-shadow: 0 0 8px color-mix(in srgb, var(--green) 55%, transparent); } .server-card.partial::before { background: var(--amber); } .server-card.all-offline::before { background: var(--red); } .server-card-head { display: flex; align-items: center; gap: 12px; } .server-card-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); color: var(--cyan); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); } .server-card-titles { flex: 1; min-width: 0; } .server-card-name { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: .2px; } .server-card-ip { font-size: 11.5px; color: var(--muted); font-family: 'SF Mono', Menlo, Consolas, monospace; margin-top: 3px; word-break: break-all; } .server-card-desc { font-size: 12px; color: var(--dim); line-height: 1.5; } /* 服务器到期时间条：临近/已过期用主题色高亮 */ .server-card-expiry { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; gap: 6px; align-items: center; font-family: 'SF Mono', Menlo, Consolas, monospace; } .server-card-expiry.soon { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: var(--radius-control); padding: 4px 8px; } .server-card-expiry.expired { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: var(--radius-control); padding: 4px 8px; } /* 卡片右上在线徽标：9/9 在线 */ .server-online-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid; line-height: 1.4; white-space: nowrap; font-family: 'SF Mono', Menlo, Consolas, monospace; } .server-online-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .server-online-badge.ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 45%, transparent); } .server-online-badge.warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); border-color: color-mix(in srgb, var(--amber) 45%, transparent); } .server-online-badge.bad { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 45%, transparent); } .server-card-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; } .server-card-actions .pill-btn.is-primary { background: var(--cyan); color: #041013; border-color: var(--cyan); font-weight: 700; } .server-card-actions .pill-btn.is-primary:hover { background: transparent; color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan); } .server-card-actions .pill-btn.is-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); } .server-card-actions .pill-btn.is-danger:hover { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); } /* 服务器工具栏 */ .server-toolbar .pill-btn.is-cyan { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); } .server-toolbar .pill-btn.is-cyan:hover { color: var(--cyan); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); } .server-toolbar .pill-btn:disabled { opacity: .55; cursor: not-allowed; } .program-list { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; } .program-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface2); transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; } .program-item:hover { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); background: color-mix(in srgb, var(--cyan) 7%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--cyan) 14%, transparent); transform: translateX(2px); } .program-item.offline { opacity: .68; } .program-item.offline:hover { opacity: .9; } .program-ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; background: var(--surface); border: 1px solid var(--border); } .program-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .program-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; line-height: 1.45; } /* 三段式布局：账号+tab tag 不缩（始终可见）；策略名最小宽度=内容宽，放不下自动折行，绝不被压成 0 */ .program-name .prog-sep { color: var(--dim); font-weight: 400; opacity: .55; flex: 0 0 auto; } .program-name .prog-account { color: var(--text); font-weight: 700; flex: 0 0 auto; } .program-name .prog-strategy { color: var(--text); font-weight: 600; flex: 1 1 auto; min-width: fit-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 三档 tab tag：使用语义色 + mix() 派生背景，确保深色/浅色主题下都有合理对比度 */ .program-name .prog-tab-tag { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid; letter-spacing: .3px; line-height: 1.55; display: inline-flex; align-items: center; flex: 0 0 auto; box-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent); } .program-name .prog-tab-tag.public { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 50%, transparent); } .program-name .prog-tab-tag.private { color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, transparent); border-color: color-mix(in srgb, var(--purple) 50%, transparent); } .program-name .prog-tab-tag.signal { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); } .program-name .prog-tab-tag.simulation { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 50%, transparent); } .program-name .prog-tab-tag.other { color: var(--muted); background: var(--surface); border-color: var(--border-strong); } .program-meta { font-size: 11px; color: var(--dim); font-family: 'SF Mono', Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; } .program-meta::before { content: "›"; color: color-mix(in srgb, var(--dim) 65%, transparent); font-family: inherit; } .program-meta .program-link { color: var(--muted); text-decoration: none; border-bottom: 1px dashed transparent; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .program-meta .program-link:hover { color: var(--cyan); border-bottom-color: var(--cyan); } .program-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; } .program-actions .prog-action { min-height: 26px; padding: 3px 10px; font-size: 11px; } .program-actions .prog-action-cyan { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); } .program-actions .prog-action-cyan:hover { color: var(--cyan); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); } .program-actions .prog-action-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); } .program-actions .prog-action-danger:hover { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); } .status-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 80%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent); } .status-dot.online { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 7px color-mix(in srgb, var(--green) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent); } /* 在线呼吸光环：提示实时状态 */ .status-dot.online::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; animation: statusPulse 2.4s ease-out infinite; } .status-dot { position: relative; } @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .status-dot.online::after { animation: none; } .server-card, .program-item { transition: none; } } .status-dot.offline { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 6px color-mix(in srgb, var(--red) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent); } .status-dot.unknown { background: var(--dim); } .server-empty { padding: 34px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); font-size: 13px; } /* 服务器工具栏 */ .server-toolbar-title { font-size: 13px; color: var(--muted); } .server-toolbar .refresh-btn { display: inline-flex; align-items: center; gap: 6px; } /* 迁移方案展示 */ .migrate-badge { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; font-size: 10.5px; font-weight: 700; line-height: 1.4; padding: 1px 7px 1px 6px; border-radius: 999px; color: #041013; background: var(--amber); animation: migrate-pulse 1.4s ease-in-out infinite; } @keyframes migrate-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } .migrate-plan-box { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface2); max-height: 46vh; overflow-y: auto; } .migrate-plan-summary { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 8px; } .migrate-risk-list { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 6px 0 10px; } .migrate-risk-list li { font-size: 12px; color: var(--amber); padding-left: 14px; position: relative; line-height: 1.5; } .migrate-risk-list li::before { content: "⚠"; position: absolute; left: 0; top: 0; font-size: 11px; } .migrate-step-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--border); line-height: 1.5; } .migrate-step-row .migrate-step-state { flex: 0 0 auto; width: 20px; text-align: center; } .migrate-step-row.ok .migrate-step-state { color: var(--green); } .migrate-step-row.fail .migrate-step-state { color: var(--red); } .migrate-step-row .migrate-step-main { flex: 1; min-width: 0; } .migrate-step-row .migrate-step-action { font-weight: 600; color: var(--cyan); font-family: 'SF Mono', Menlo, Consolas, monospace; } .migrate-log-box { margin-top: 10px; max-height: 26vh; overflow-y: auto; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: var(--text); } .theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .theme-option { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s, background .18s; } .theme-option:hover { border-color: var(--cyan); transform: translateY(-1px); } .theme-option.active { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 18%, transparent); background: var(--surface2); } .theme-option:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .theme-preview { position: relative; display: inline-flex; flex: 0 0 auto; width: 58px; height: 38px; overflow: hidden; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--preview-line) 55%, transparent); background: var(--preview-bg); } .theme-preview span { position: absolute; display: block; border-radius: 2px; } .theme-preview span:first-child { inset: 0 0 auto; height: 7px; background: var(--preview-surface); border-radius: 0; } .theme-preview span:nth-child(2) { left: 5px; top: 13px; width: 18px; height: 19px; background: var(--preview-surface); } .theme-preview span:nth-child(3) { left: 28px; top: 13px; right: 5px; height: 5px; background: var(--preview-accent); } .theme-preview span:nth-child(4) { left: 28px; top: 22px; right: 10px; height: 3px; background: var(--preview-line); box-shadow: 0 6px 0 var(--preview-line); } .theme-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .theme-option-name { font-size: 13px; font-weight: 700; } .theme-option-desc { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-option-check { margin-left: auto; color: var(--cyan); font-size: 16px; opacity: 0; } .theme-option.active .theme-option-check { opacity: 1; } @media (max-width: 560px) { .theme-grid { grid-template-columns: 1fr; } } /* 主题变体使用统一的中性组件材质，避免默认深色渐变渗入其它风格。 */ :root[data-theme="aurora"] .syscfg-section.is-prompt, :root[data-theme="ember"] .syscfg-section.is-prompt, :root[data-theme="light"] .syscfg-section.is-prompt, :root[data-theme="sand"] .syscfg-section.is-prompt { background: var(--surface2); border-color: var(--border); } :root[data-theme="aurora"] .prompt-hero, :root[data-theme="ember"] .prompt-hero, :root[data-theme="light"] .prompt-hero, :root[data-theme="sand"] .prompt-hero { background: var(--surface); border-color: var(--border); } :root[data-theme="light"], :root[data-theme="sand"] { color-scheme: light; --icon-chip: #eef1f8; } :root[data-theme="light"] .roi-stat, :root[data-theme="light"] .engage-grid, :root[data-theme="light"] .mk-config-field, :root[data-theme="light"] .prompt-tip, :root[data-theme="light"] .chk-row, :root[data-theme="mist"] .roi-stat, :root[data-theme="mist"] .engage-grid, :root[data-theme="mist"] .mk-config-field, :root[data-theme="mist"] .prompt-tip, :root[data-theme="mist"] .chk-row, :root[data-theme="sand"] .roi-stat, :root[data-theme="sand"] .engage-grid, :root[data-theme="sand"] .mk-config-field, :root[data-theme="sand"] .prompt-tip, :root[data-theme="sand"] .chk-row { background: var(--surface2); border-color: var(--border); } :root[data-theme="light"] .input, :root[data-theme="light"] .mini-input, :root[data-theme="light"] select.input, :root[data-theme="light"] textarea.input, :root[data-theme="mist"] .input, :root[data-theme="mist"] .mini-input, :root[data-theme="mist"] select.input, :root[data-theme="mist"] textarea.input, :root[data-theme="sand"] .input, :root[data-theme="sand"] .mini-input, :root[data-theme="sand"] select.input, :root[data-theme="sand"] textarea.input { background: var(--input-bg); color: var(--text); } :root[data-theme="light"] select.input option, :root[data-theme="mist"] select.input option, :root[data-theme="sand"] select.input option { background: var(--surface); color: var(--text); } :root[data-theme="light"] .nav-item:hover, :root[data-theme="light"] tbody tr:hover, :root[data-theme="light"] .btn-ghost:hover, :root[data-theme="mist"] .nav-item:hover, :root[data-theme="mist"] tbody tr:hover, :root[data-theme="mist"] .btn-ghost:hover, :root[data-theme="sand"] .nav-item:hover, :root[data-theme="sand"] tbody tr:hover, :root[data-theme="sand"] .btn-ghost:hover { background: color-mix(in srgb, var(--cyan) 6%, transparent); } :root[data-theme="light"] .modal-box, :root[data-theme="light"] .alert-box, :root[data-theme="sand"] .modal-box, :root[data-theme="sand"] .alert-box { box-shadow: 0 22px 60px rgba(31,49,65,.2); } :root[data-theme="light"] .nav-item.active, :root[data-theme="mist"] .nav-item.active, :root[data-theme="sand"] .nav-item.active { background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); border-color: color-mix(in srgb, var(--cyan) 35%, transparent); } /* 五套重构主题各自拥有不同的字体、圆角、边界和表面材质。 */ :root[data-theme="aurora"] :is(.card, .sum-card, .modal-box, .alert-box, .login-card, .syscfg-section) { border-radius: var(--radius-card); box-shadow: inset 0 1px 0 rgba(100,255,155,.08), var(--shadow); } :root[data-theme="aurora"] :is(.nav-item, .nav-toggle, .pill-btn, .btn, .mini-input, .input, .theme-option, .settings-tabs, .syscfg-subtabs) { border-radius: var(--radius-control); } :root[data-theme="aurora"] .bg-mesh { background: linear-gradient(180deg, var(--bg), var(--bg2)); } :root[data-theme="aurora"] .grid-overlay { mask-image: none; } :root[data-theme="aurora"] .topnav { border-bottom: 1px solid var(--cyan); } :root[data-theme="aurora"] .brand .dot { border-radius: 1px; box-shadow: 0 0 14px var(--cyan); } :root[data-theme="aurora"] .nav-item.active { color: var(--cyan); background: rgba(100,255,155,.08); border-color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); } :root[data-theme="aurora"] :is(.card-header h3, .field-label) { letter-spacing: .8px; } :root[data-theme="aurora"] :is(.btn-primary, .pill-btn.active) { box-shadow: 0 0 18px rgba(100,255,155,.25); } :root[data-theme="light"] :is(.card, .sum-card, .modal-box, .alert-box, .login-card, .syscfg-section) { border-radius: var(--radius-card); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.72); } :root[data-theme="light"] :is(.nav-item, .nav-toggle, .pill-btn, .btn, .mini-input, .input, .theme-option, .settings-tabs, .syscfg-subtabs) { border-radius: var(--radius-control); } :root[data-theme="light"] .bg-mesh { background: radial-gradient(900px 560px at 88% -16%, rgba(95,111,178,.14), transparent 64%), radial-gradient(820px 600px at -12% 20%, rgba(12,127,121,.13), transparent 62%), linear-gradient(180deg, var(--bg), var(--bg2)); } :root[data-theme="light"] .grid-overlay { mask-image: radial-gradient(ellipse at 60% 12%, #000 10%, transparent 88%); } :root[data-theme="light"] .topnav { border-bottom: 1px solid rgba(12,127,121,.42); box-shadow: 0 6px 20px rgba(31,92,86,.12); } :root[data-theme="light"] .brand { letter-spacing: .45px; } :root[data-theme="light"] .brand .dot { width: 10px; height: 10px; border-radius: 4px; box-shadow: 0 0 0 4px rgba(12,127,121,.12), 0 0 13px rgba(12,127,121,.55); } :root[data-theme="light"] .card { border-top: 2px solid var(--cyan); border-left: 1px solid rgba(12,127,121,.22); } :root[data-theme="light"] .card-header h3 { letter-spacing: .25px; } :root[data-theme="light"] .card-header h3::before { content: ""; width: 19px; height: 4px; border-radius: 99px; background: var(--cyan); box-shadow: 7px 0 0 rgba(95,111,178,.52); } :root[data-theme="light"] .nav-item.active { color: var(--cyan); background: rgba(12,127,121,.10); border-color: rgba(12,127,121,.38); box-shadow: inset 0 -2px 0 var(--cyan); } :root[data-theme="light"] :is(.btn-primary, .pill-btn.active) { box-shadow: 0 8px 18px -10px rgba(12,127,121,.78), inset 0 1px 0 rgba(255,255,255,.24); } :root[data-theme="light"] .btn:hover { border-color: var(--cyan); color: var(--cyan); } :root[data-theme="light"] :is(.roi-stat, .score-kline-panel) { border-color: rgba(28,91,86,.23); } :root[data-theme="light"] :is(.roi-stat:hover, .score-kline-panel:hover) { border-color: color-mix(in srgb, var(--cyan) 58%, transparent); } :root[data-theme="light"] .score-detail-row td { background: linear-gradient(145deg, rgba(232,241,237,.98), rgba(247,251,248,.98)); } :root[data-theme="sand"] :is(.card, .sum-card, .modal-box, .alert-box, .login-card, .syscfg-section) { border-radius: var(--radius-card); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,250,242,.72); } :root[data-theme="sand"] :is(.nav-item, .nav-toggle, .pill-btn, .btn, .mini-input, .input, .theme-option, .settings-tabs, .syscfg-subtabs) { border-radius: var(--radius-control); } :root[data-theme="sand"] .bg-mesh { background: repeating-linear-gradient(0deg, rgba(82,62,42,.025) 0, rgba(82,62,42,.025) 1px, transparent 1px, transparent 5px), radial-gradient(820px 540px at 92% -12%, rgba(180,109,46,.14), transparent 64%), radial-gradient(760px 560px at -10% 22%, rgba(154,96,67,.10), transparent 62%), linear-gradient(180deg, var(--bg), var(--bg2)); } :root[data-theme="sand"] .grid-overlay { mask-image: linear-gradient(135deg, #000 8%, transparent 90%); } :root[data-theme="sand"] .topnav { border-bottom: 2px solid color-mix(in srgb, var(--amber) 72%, transparent); box-shadow: 0 5px 14px rgba(91,67,43,.14); } :root[data-theme="sand"] .brand { font-weight: 600; letter-spacing: .7px; } :root[data-theme="sand"] .brand .dot { width: 10px; height: 10px; border-radius: 1px; transform: rotate(45deg); box-shadow: 0 0 0 4px rgba(180,109,46,.12); } :root[data-theme="sand"] .card { border-top: 1px solid var(--border-strong); border-left: 3px solid color-mix(in srgb, var(--amber) 72%, transparent); } :root[data-theme="sand"] .card-header h3 { font-weight: 600; letter-spacing: .35px; } :root[data-theme="sand"] .card-header h3::before { content: ""; width: 3px; height: 18px; background: var(--amber); box-shadow: 5px 0 0 rgba(154,96,67,.36); } :root[data-theme="sand"] .nav-item.active { color: var(--cyan); background: rgba(154,96,67,.10); border-color: rgba(154,96,67,.38); box-shadow: inset 0 -2px 0 var(--amber); } :root[data-theme="sand"] :is(.btn-primary, .pill-btn.active) { box-shadow: 3px 3px 0 rgba(91,67,43,.18), inset 0 1px 0 rgba(255,255,255,.20); } :root[data-theme="sand"] .btn:hover { border-color: var(--amber); color: var(--amber); } :root[data-theme="sand"] :is(.roi-stat, .score-kline-panel) { border-color: rgba(82,62,42,.26); } :root[data-theme="sand"] :is(.roi-stat:hover, .score-kline-panel:hover) { border-color: color-mix(in srgb, var(--amber) 60%, transparent); } :root[data-theme="sand"] .d-sep { border-top: 2px double rgba(154,96,67,.38); } :root[data-theme="sand"] .score-detail-row td { background: linear-gradient(180deg, rgba(251,244,233,.98), rgba(239,226,210,.98)); } /* 三套主题使用不同的界面语法：海军是仪表盘、海岛是海岸、酒红是编辑部。 */ :root[data-theme="ember"] :is(.card, .sum-card, .modal-box, .alert-box, .login-card, .syscfg-section) { border-radius: var(--radius-card); box-shadow: var(--shadow), inset 0 1px 0 rgba(172,204,220,.08); } :root[data-theme="ember"] :is(.nav-item, .nav-toggle, .pill-btn, .btn, .mini-input, .input, .theme-option, .settings-tabs, .syscfg-subtabs) { border-radius: var(--radius-control); } :root[data-theme="ember"] .bg-mesh { background: radial-gradient(760px 520px at 86% -12%, rgba(243,189,87,.13), transparent 64%), radial-gradient(820px 620px at -12% 18%, rgba(105,213,209,.10), transparent 62%), linear-gradient(180deg, var(--bg), var(--bg2)); } :root[data-theme="ember"] .grid-overlay { mask-image: linear-gradient(180deg, #000, transparent 90%); } :root[data-theme="ember"] .topnav { border-bottom: 2px solid color-mix(in srgb, var(--amber) 72%, transparent); box-shadow: 0 8px 24px rgba(0,8,19,.28); } :root[data-theme="ember"] .brand { letter-spacing: .7px; } :root[data-theme="ember"] .brand .dot { border-radius: 3px; box-shadow: 0 0 0 3px rgba(243,189,87,.14), 0 0 14px var(--amber); } :root[data-theme="ember"] .card { border-top: 2px solid color-mix(in srgb, var(--cyan) 65%, transparent); } :root[data-theme="ember"] .card-header h3 { letter-spacing: .45px; } :root[data-theme="ember"] .card-header h3::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 0 3px rgba(243,189,87,.12); } :root[data-theme="ember"] .nav-item.active { color: var(--amber); background: rgba(243,189,87,.12); border-color: rgba(243,189,87,.58); box-shadow: inset 3px 0 0 var(--amber); } :root[data-theme="ember"] :is(.btn-primary, .pill-btn.active) { box-shadow: 0 8px 22px -10px rgba(243,189,87,.82), inset 0 1px 0 rgba(255,255,255,.18); } :root[data-theme="ember"] .btn:hover { border-color: var(--amber); color: var(--amber); } :root[data-theme="ember"] :is(.roi-stat, .score-kline-panel) { border-color: rgba(172,204,220,.24); } :root[data-theme="ember"] :is(.roi-stat:hover, .score-kline-panel:hover) { border-color: color-mix(in srgb, var(--amber) 62%, transparent); } :root[data-theme="ember"] :is(.syscfg-section.is-prompt, .prompt-hero, .roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row) { background: var(--surface2); border-color: var(--border); } :root[data-theme="mist"] :is(.card, .sum-card, .modal-box, .alert-box, .login-card, .syscfg-section) { border-radius: var(--radius-card); box-shadow: var(--shadow), inset 0 1px 0 rgba(160,229,224,.10); } :root[data-theme="mist"] :is(.nav-item, .nav-toggle, .pill-btn, .btn, .mini-input, .input, .theme-option, .settings-tabs, .syscfg-subtabs) { border-radius: var(--radius-control); } :root[data-theme="mist"] .bg-mesh { background: radial-gradient(900px 580px at 12% -14%, rgba(117,216,238,.18), transparent 62%), radial-gradient(720px 520px at 92% 10%, rgba(255,154,118,.16), transparent 60%), linear-gradient(150deg, var(--bg), var(--bg2) 58%, #084354); } :root[data-theme="mist"] .grid-overlay { mask-image: radial-gradient(ellipse at 50% 20%, #000 12%, transparent 88%); } :root[data-theme="mist"] .topnav { border-bottom: 3px solid var(--cyan); box-shadow: 0 8px 28px rgba(0,20,29,.32); } :root[data-theme="mist"] .brand .dot { box-shadow: 0 0 0 4px rgba(255,154,118,.15), 0 0 16px var(--cyan); } :root[data-theme="mist"] .card { border-top: 3px solid var(--cyan); } :root[data-theme="mist"] .card-header h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(255,154,118,.13), 0 0 12px var(--cyan); } :root[data-theme="mist"] .nav-item.active { color: var(--cyan); background: rgba(255,154,118,.16); border-color: var(--cyan); box-shadow: 0 4px 14px rgba(255,154,118,.16); } :root[data-theme="mist"] :is(.btn-primary, .pill-btn.active) { box-shadow: 0 10px 26px -10px rgba(255,154,118,.92), inset 0 1px 0 rgba(255,255,255,.22); } :root[data-theme="mist"] .btn:hover { border-color: var(--cyan); color: var(--cyan); } :root[data-theme="mist"] :is(.syscfg-section.is-prompt, .prompt-hero, .roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row) { background: var(--surface2); border-color: var(--border); } :root[data-theme="mist"] .score-detail-row td { background: linear-gradient(145deg, rgba(25,120,138,.96), rgba(16,93,111,.96)); } :root[data-theme="graphite"] :is(.card, .sum-card, .modal-box, .alert-box, .login-card, .syscfg-section) { border-radius: var(--radius-card); box-shadow: var(--shadow), inset 0 1px 0 rgba(246,210,179,.10); } :root[data-theme="graphite"] :is(.nav-item, .nav-toggle, .pill-btn, .btn, .mini-input, .input, .theme-option, .settings-tabs, .syscfg-subtabs) { border-radius: var(--radius-control); } :root[data-theme="graphite"] .bg-mesh { background: radial-gradient(820px 560px at 88% -14%, rgba(227,154,101,.16), transparent 62%), radial-gradient(740px 520px at -10% 22%, rgba(214,166,200,.11), transparent 60%), linear-gradient(145deg, var(--bg), var(--bg2) 62%, #32182a); } :root[data-theme="graphite"] .grid-overlay { mask-image: linear-gradient(145deg, #000 8%, transparent 92%); } :root[data-theme="graphite"] .topnav { border-bottom: 1px solid var(--cyan); box-shadow: 0 10px 32px rgba(7,0,4,.38); } :root[data-theme="graphite"] .brand { font-weight: 600; letter-spacing: 1px; } :root[data-theme="graphite"] .brand .dot { border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 4px rgba(227,154,101,.13), 0 0 14px var(--cyan); } :root[data-theme="graphite"] .card { border-left: 3px solid color-mix(in srgb, var(--cyan) 70%, transparent); } :root[data-theme="graphite"] .card-header h3 { font-size: 16px; font-weight: 600; letter-spacing: .55px; } :root[data-theme="graphite"] .card-header h3::before { content: ""; width: 15px; height: 2px; background: var(--amber); transform: skew(-28deg); box-shadow: 5px 0 0 color-mix(in srgb, var(--cyan) 65%, transparent); } :root[data-theme="graphite"] .nav-item.active { color: var(--cyan); background: rgba(227,154,101,.14); border-color: rgba(227,154,101,.58); box-shadow: inset 0 -2px 0 var(--cyan); } :root[data-theme="graphite"] :is(.btn-primary, .pill-btn.active) { box-shadow: 0 10px 26px -10px rgba(227,154,101,.78), inset 0 1px 0 rgba(255,255,255,.16); } :root[data-theme="graphite"] .btn:hover { border-color: var(--cyan); color: var(--cyan); } :root[data-theme="graphite"] :is(.syscfg-section.is-prompt, .prompt-hero, .roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row) { background: var(--surface2); border-color: var(--border); } :root[data-theme="graphite"] .score-detail-row td { background: linear-gradient(145deg, rgba(75,36,53,.96), rgba(53,26,43,.96)); } :root[data-theme="cinnabar"] :is(.card, .sum-card, .modal-box, .alert-box, .login-card, .syscfg-section) { border-radius: var(--radius-card); box-shadow: none; } :root[data-theme="cinnabar"] :is(.nav-item, .nav-toggle, .pill-btn, .btn, .mini-input, .input, .theme-option, .settings-tabs, .syscfg-subtabs) { border-radius: var(--radius-control); } :root[data-theme="cinnabar"] .bg-mesh { background: var(--bg); } :root[data-theme="cinnabar"] .grid-overlay { mask-image: none; } :root[data-theme="cinnabar"] .topnav { border-bottom: 2px solid var(--text); } :root[data-theme="cinnabar"] .brand { text-transform: uppercase; letter-spacing: 1.2px; } :root[data-theme="cinnabar"] .brand .dot { border-radius: 0; box-shadow: none; } :root[data-theme="cinnabar"] .card { border-width: 2px; } :root[data-theme="cinnabar"] :is(.card-header h3, .field-label) { text-transform: uppercase; letter-spacing: 1px; } :root[data-theme="cinnabar"] .nav-item.active { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); } :root[data-theme="cinnabar"] :is(.btn-primary, .pill-btn.active) { box-shadow: none; border: 2px solid var(--cyan); } :root[data-theme="cinnabar"] .btn-ghost:hover { background: var(--surface2); } :root[data-theme="aurora"] :is(.roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row), :root[data-theme="light"] :is(.roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row), :root[data-theme="mist"] :is(.roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row), :root[data-theme="graphite"] :is(.roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row), :root[data-theme="cinnabar"] :is(.roi-stat, .engage-grid, .mk-config-field, .prompt-tip, .chk-row) { background: var(--surface2); border-color: var(--border); } :root[data-theme="aurora"] .syscfg-section.is-prompt, :root[data-theme="light"] .syscfg-section.is-prompt, :root[data-theme="sand"] .syscfg-section.is-prompt, :root[data-theme="mist"] .syscfg-section.is-prompt, :root[data-theme="graphite"] .syscfg-section.is-prompt, :root[data-theme="cinnabar"] .syscfg-section.is-prompt, :root[data-theme="aurora"] .prompt-hero, :root[data-theme="light"] .prompt-hero, :root[data-theme="sand"] .prompt-hero, :root[data-theme="mist"] .prompt-hero, :root[data-theme="graphite"] .prompt-hero, :root[data-theme="cinnabar"] .prompt-hero { background: var(--surface); border-color: var(--border); } /* 系统配置内部子 Tab：按配置分组快速过滤 */ .syscfg-subtabs { display: flex; gap: 6px; padding: 4px; margin: 0 0 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; scrollbar-width: none; } .syscfg-subtabs::-webkit-scrollbar { display: none; } .syscfg-subtab { flex: 0 0 auto; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: .2s; white-space: nowrap; } .syscfg-subtab:hover { color: var(--text); } .syscfg-subtab.active { background: var(--cyan); color: var(--on-accent); box-shadow: 0 1px 3px color-mix(in srgb, var(--cyan) 25%, transparent); } /* 市场趋势子导航：保持和内容区一致的低对比度工作台风格。 */ #trend-subtabs { gap: 3px; padding: 3px; margin-bottom: 18px; background: color-mix(in srgb, var(--surface2) 78%, var(--bg)); border-color: var(--border-strong); border-radius: var(--radius-control); } #trend-subtabs .syscfg-subtab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 16px; border: 1px solid transparent; border-radius: calc(var(--radius-control) - 3px); color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .1px; transition: color .18s ease, background .18s ease, border-color .18s ease; } #trend-subtabs .syscfg-subtab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 72%, transparent); } #trend-subtabs .syscfg-subtab.active { color: var(--text); background: var(--surface); border-color: color-mix(in srgb, var(--cyan) 42%, var(--border)); box-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 35%, transparent), inset 0 -2px 0 var(--cyan); } #trend-subtabs .trend-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 6px; color: var(--dim); font-size: 12px; font-weight: 800; line-height: 1; } #trend-subtabs .syscfg-subtab.active .trend-tab-icon { color: var(--cyan); } /* 运维中心子导航：与市场趋势子导航统一风格 */ #ops-subtabs { gap: 3px; padding: 3px; margin-bottom: 18px; background: color-mix(in srgb, var(--surface2) 78%, var(--bg)); border-color: var(--border-strong); border-radius: var(--radius-control); } #ops-subtabs .syscfg-subtab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 16px; border: 1px solid transparent; border-radius: calc(var(--radius-control) - 3px); color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .1px; transition: color .18s ease, background .18s ease, border-color .18s ease; } #ops-subtabs .syscfg-subtab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 72%, transparent); } #ops-subtabs .syscfg-subtab.active { color: var(--text); background: var(--surface); border-color: color-mix(in srgb, var(--cyan) 42%, var(--border)); box-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 35%, transparent), inset 0 -2px 0 var(--cyan); } #ops-subtabs .syscfg-subtab .ico { font-size: 14px; line-height: 1; } /* 市场趋势·KOL 跟踪卡片 */ .kol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 14px; } .kol-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; } .kol-card.dragging { opacity: 0.45; border-style: dashed; } .kol-drag-handle { cursor: grab; color: var(--muted); touch-action: none; user-select: none; } .kol-drag-handle:active { cursor: grabbing; } .kol-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kol-name { font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kol-pid { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kol-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .kol-stat { background: var(--surface2); border-radius: 9px; padding: 7px 9px; min-width: 0; } .kol-stat .k { font-size: 11px; color: var(--muted); white-space: nowrap; } .kol-stat .v { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kol-positions { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; } .kol-pos-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .kol-pos-table { width: 100%; border-collapse: collapse; font-size: 12px; } .kol-pos-table th { text-align: left; color: var(--dim); font-weight: 500; padding: 3px 4px; white-space: nowrap; } .kol-pos-table td { padding: 4px; color: var(--text); border-top: 1px solid var(--border); white-space: nowrap; } .kol-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0; } /* 🤖 一键跟单开关（KOL 卡片 + 飞书信号区） */ .copy-toggle { padding: 4px 10px; font-size: 12px; border-radius: 999px; line-height: 1.4; white-space: nowrap; } .copy-toggle.is-on { border-color: color-mix(in srgb, var(--green) 55%, transparent); color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); font-weight: 700; } .copy-toggle.is-on:hover { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); } .copy-toggle.is-off { color: var(--muted); border-color: var(--border); background: var(--surface); } #settings-pane-system[data-sgroup="llm"] .syscfg-section:not([data-group~="llm"]) { display: none; } #settings-pane-system[data-sgroup="x"] .syscfg-section:not([data-group~="x"]) { display: none; } #settings-pane-system[data-sgroup="auth"] .syscfg-section:not([data-group~="auth"]) { display: none; } #settings-pane-system[data-sgroup="prompt"] .syscfg-section:not([data-group~="prompt"]) { display: none; } #settings-pane-system[data-sgroup="theme"] .syscfg-section:not([data-group~="theme"]) { display: none; } #settings-pane-system[data-sgroup="feishu"] .syscfg-section:not([data-group~="feishu"]) { display: none; } /* 普通账号仅保留主题和登录/双因素认证，管理员仍可查看全部配置。 */ #settings-pane-system.normal-user .syscfg-section[data-group~="llm"], #settings-pane-system.normal-user .syscfg-section[data-group~="prompt"], #settings-pane-system.normal-user .syscfg-section[data-group~="x"], #settings-pane-system.normal-user .syscfg-section[data-group~="feishu"] { display: none !important; } /* 合并设置弹窗：Tabs（交易所账号 / 系统配置） */ .settings-tabs { display: flex; gap: 6px; padding: 4px; margin: 4px 0 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; } .settings-tab { flex: 1; padding: 8px 10px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 9px; cursor: pointer; transition: .2s; user-select: none; } .settings-tab:hover { color: var(--text); } .settings-tab.active { background: var(--cyan); color: var(--on-accent); box-shadow: 0 1px 3px color-mix(in srgb, var(--cyan) 25%, transparent); } .settings-pane { display: none; } .settings-pane.active { display: block; } /* 账号卡片列表：桌面横向，按钮右侧对齐；移动端改为卡片式，按钮下方排列 */ .account-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--card-bg); transition: border-color .2s, transform .2s; } .account-item:hover { border-color: rgba(52,231,208,.35); } .account-item.active { border-color: rgba(52,231,208,.55); box-shadow: 0 0 0 2px rgba(52,231,208,.08); } .account-item-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .account-item-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: .2px; } .exchange-icon { width: 17px; height: 17px; flex: 0 0 17px; display: inline-block; } .account-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .account-item-actions .pill-btn { min-height: 32px; padding: 5px 12px; font-size: 12px; } .btn-danger-sm { font-size: 12px; padding: 5px 12px; border-radius: 8px; } .gear-btn { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: 15px; cursor: pointer; transition: .2s; } .gear-btn:hover { border-color: var(--cyan); color: var(--cyan); transform: rotate(45deg); } /* 顶栏当前账号胶囊：紧挨⚙，点击也能打开交易所账号 */ .account-name-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, var(--surface2), var(--surface)); color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .15px; cursor: pointer; user-select: none; transition: border-color .2s, color .2s, background .2s; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-name-chip:hover { border-color: var(--cyan); color: var(--cyan); } .account-name-chip::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: url("/binance.svg") center / contain no-repeat; } .llm-model-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 32px; max-width: 190px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .llm-model-chip::before { content: "🧠"; flex: 0 0 auto; font-size: 12px; } .llm-model-chip-label { flex: 0 0 auto; color: var(--dim); font-weight: 500; } .llm-model-chip-value { min-width: 0; overflow: hidden; color: var(--cyan); text-overflow: ellipsis; } @media (max-width: 820px) { .account-name-chip { max-width: 120px; padding: 0 8px 0 10px; font-size: 11px; height: 30px; } .llm-model-chip { max-width: 122px; height: 30px; padding: 0 8px; } .llm-model-chip-label { display: none; } } .account-badge { font-size: 10px; color: var(--green); border: 1px solid rgba(55,224,138,.3); background: rgba(55,224,138,.1); border-radius: 6px; padding: 1px 5px; margin-left: 4px; } .main { min-width: 0; } .live-badge { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--green); background: rgba(55,224,138,.10); border: 1px solid rgba(55,224,138,.28); padding: 5px 11px; border-radius: 20px; white-space: nowrap; } .live-badge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.8s infinite; } .live-badge.paused { color: var(--amber); background: rgba(255,190,92,.10); border-color: rgba(255,190,92,.28); } .live-badge.paused .live-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: none; } #last-updated { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; } .content { width: min(100%, 1600px); margin: 0 auto; padding: 26px 32px 48px; } .section { display: none; animation: fade .35s ease both; } .section.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---- 卡片 ---- */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 20px; transition: .25s; box-shadow: var(--shadow); overflow-x: auto; } .card:hover { border-color: var(--border-strong); } .card-header { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .card-header h3 { min-width: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; } /* 收益曲线顶部统计条 —— 精致 tile 风格（替换掉旧的突兀渐变块） */ .roi-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 10px 2px 4px; margin-bottom: 14px; background: transparent; border: none; } @media (max-width: 820px) { .roi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .roi-stat { position: relative; padding: 14px 14px 12px 52px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); transition: transform .15s ease, border-color .15s ease, background .15s ease; min-width: 0; } .roi-stat[data-icon-use] { white-space: nowrap; overflow: hidden; } .roi-stat[data-icon-use] .roi-stat-label, .roi-stat[data-icon-use] .roi-stat-val, .roi-stat[data-icon-use] .roi-stat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .roi-stat:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface); } .roi-stat::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: var(--surface); border: 1px solid var(--border); } .roi-stat[data-icon-roi]::before { background: linear-gradient(135deg, rgba(55,224,138,.18), rgba(77,171,247,.12)); border-color: rgba(55,224,138,.35); } .roi-stat[data-icon-peak]::before { background: linear-gradient(135deg, rgba(240,185,11,.20), rgba(255,129,147,.12)); border-color: rgba(240,185,11,.40); } .roi-stat[data-icon-dd]::before { background: linear-gradient(135deg, rgba(255,92,92,.18), rgba(140,90,255,.12)); border-color: rgba(255,92,92,.30); } .roi-stat[data-icon-pnl]::before { background: linear-gradient(135deg, rgba(77,171,247,.20), rgba(52,231,208,.10)); border-color: rgba(77,171,247,.35); } .roi-stat[data-icon-use]::before { background: linear-gradient(135deg, rgba(139,128,249,.22), rgba(106,200,255,.12)); border-color: rgba(139,128,249,.42); } .roi-stat[data-icon-dist]::before { background: linear-gradient(135deg, rgba(52,231,208,.18), rgba(139,128,249,.14)); border-color: rgba(52,231,208,.35); } .roi-stat .roi-stat-ico { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); font-size: 15px; line-height: 1; pointer-events: none; } .roi-stat .roi-stat-label { font-size: 11px; color: var(--muted); margin-bottom: 5px; letter-spacing: .2px; display: flex; align-items: center; gap: 6px; } .roi-stat .roi-stat-val { font-size: 20px; font-weight: 800; letter-spacing: .2px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .roi-stat .roi-stat-sub { font-size: 11px; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .roi-stat .peak-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; color: var(--amber); background: rgba(240,185,11,.12); border: 1px solid rgba(240,185,11,.35); margin-left: 4px; } .badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; } .badge-real { color: var(--green); background: rgba(55,224,138,.12); border: 1px solid rgba(55,224,138,.3); } .badge-dry { color: var(--amber); background: rgba(255,190,92,.12); border: 1px solid rgba(255,190,92,.3); } .badge-run { color: var(--blue); background: rgba(77,171,247,.12); border: 1px solid rgba(77,171,247,.3); } .badge-offline { color: var(--red); background: rgba(255,92,92,.12); border: 1px solid rgba(255,92,92,.35); } .btn-danger-sm { padding: 5px 14px; border-radius: 8px; border: 1px solid rgba(255,92,92,.35); background: rgba(255,92,92,.1); color: var(--red); font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s; white-space: nowrap; } .btn-danger-sm:hover { background: rgba(255,92,92,.2); border-color: rgba(255,92,92,.5); } /* ---- 收益曲线弹窗 ---- */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 20px; background: var(--overlay-bg); backdrop-filter: blur(4px); } .modal-box { width: min(750px, 95vw); max-height: min(680px, 90vh); overflow: auto; box-sizing: border-box; padding: 18px; background: var(--modal-bg); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.48); } .modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--text); font-size: 14px; } .close-btn { margin-left: auto; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; } .close-btn:hover { color: var(--text); background: rgba(125,145,210,.12); } /* ---- 跟单确认弹窗：替代浏览器原生 confirm，统一继承 Dashboard 主题。 ---- */ .copy-confirm-overlay { z-index: 1100; } .copy-confirm-dialog { width: min(440px, 100%); padding: 0; overflow: hidden; } .copy-confirm-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .copy-confirm-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--cyan) 48%, var(--border)); border-radius: var(--radius-control); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--surface2)); font-size: 18px; } .copy-confirm-title { color: var(--text); font-size: 15px; font-weight: 750; line-height: 1.45; } .copy-confirm-kicker { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; } .copy-confirm-body { padding: 16px 18px 18px; } .copy-confirm-body p { color: var(--text); font-size: 13px; line-height: 1.7; } .copy-confirm-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--border)); border-radius: var(--radius-control); background: color-mix(in srgb, var(--amber) 8%, var(--surface2)); color: var(--muted); font-size: 12px; line-height: 1.55; } .copy-confirm-note strong { color: var(--amber); white-space: nowrap; } .copy-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 18px 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 62%, transparent); } .copy-confirm-actions .pill-btn { min-width: 88px; min-height: 34px; } /* ---- 多空杠杆明细筛选器 ---- */ .leverage-breakdown-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; } .leverage-filter-field { position: relative; width: 220px; min-width: 0; flex: 0 1 220px; } .leverage-filter { position: relative; } .leverage-filter-trigger { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 34px; padding: 7px 30px 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .leverage-filter-trigger::after { content: ""; position: absolute; right: 12px; top: 11px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease, border-color .15s ease; } .leverage-filter.is-open .leverage-filter-trigger::after { border-color: var(--cyan); transform: translateY(3px) rotate(225deg); } .leverage-filter-trigger:hover, .leverage-filter-trigger:focus-visible, .leverage-filter.is-open .leverage-filter-trigger { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(52,231,208,.12); } .leverage-filter-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leverage-filter-menu { position: absolute; z-index: 35; top: calc(100% + 5px); left: 0; right: 0; display: none; max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); box-shadow: 0 14px 30px rgba(0,0,0,.35); } .leverage-filter.is-open .leverage-filter-menu { display: grid; gap: 2px; } .leverage-filter-option { width: 100%; min-height: 31px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .leverage-filter-option:hover, .leverage-filter-option:focus-visible, .leverage-filter-option[aria-selected="true"] { outline: none; color: var(--text); background: rgba(52,231,208,.10); border-color: rgba(52,231,208,.35); } .leverage-filter-caption { display: block; margin: 0 0 4px 2px; color: var(--dim); font-size: 11px; } @media (max-width: 600px) { .leverage-filter-field { width: auto; flex: 1 1 160px; } } /* ---- 长视频管理弹层 ---- */ .video-manager-overlay, .video-manager-overlay[hidden] { display: none; } .video-manager-overlay.is-open { display: flex; position: fixed !important; inset: 0 !important; width: 100vw; height: 100dvh; overflow: hidden; align-items: center; justify-content: center; padding: 24px; } body.video-manager-open { overflow: hidden; } .video-manager-modal { display: flex; flex-direction: column; width: min(1280px, calc(100vw - 48px)); max-height: min(920px, calc(100dvh - 48px)); padding: 0; overflow: hidden; background: var(--modal-bg); border: 1px solid var(--border-strong); border-radius: min(18px, var(--radius-card)); box-shadow: 0 30px 90px rgba(0,0,0,.58); } .video-manager-modal-head { display: flex; align-items: center; gap: 18px; min-height: 72px; padding: 14px 22px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 68%, transparent); } .video-manager-modal-head h2 { min-width: 0; margin: 2px 0 0; color: var(--text); font-size: 18px; line-height: 1.25; } .video-manager-title-copy { min-width: 0; } .video-manager-eyebrow { display: block; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.2; text-transform: uppercase; } .video-manager-subtitle { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.4; } .video-manager-modal-head .close-btn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; } .video-manager-body { min-height: 0; overflow: auto; padding: 18px 22px 22px; overscroll-behavior: contain; } .video-manager-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .video-manager-toolbar-copy { min-width: 0; } .video-manager-toolbar-copy h3 { margin: 0 0 2px; color: var(--text); font-size: 16px; line-height: 1.35; } .video-manager-toolbar-copy h3 span { color: var(--cyan); padding: 0 4px; } .video-manager-toolbar-copy p { color: var(--muted); font-size: 11px; line-height: 1.4; } .video-manager-toolbar-actions { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; } .video-manager-toolbar-actions .pill-btn { min-height: 38px; white-space: nowrap; } .video-manager-toolbar-actions .btn-primary { box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--cyan) 90%, transparent); } .video-manager-warning { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; padding: 12px 14px; color: var(--amber); font-size: 12px; line-height: 1.65; background: color-mix(in srgb, var(--amber) 9%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border)); border-radius: min(10px, var(--radius-control)); } .video-manager-warning-icon { flex: 0 0 auto; font-size: 15px; line-height: 1.5; } .video-manager-warning b { color: var(--text); } .video-upload-panel { margin: 0 0 22px; padding: 18px; background: color-mix(in srgb, var(--surface2) 68%, transparent); border: 1px solid var(--border-strong); border-radius: min(12px, var(--radius-card)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .video-upload-panel[style*="display: block"] { animation: video-panel-in .2s ease-out; } @keyframes video-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .video-upload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .video-upload-file { min-width: 0; } .video-upload-file-name { display: block; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .video-upload-file-size { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; } .video-upload-stage { flex: 0 0 auto; color: var(--purple); font-size: 12px; text-align: right; } .video-upload-form { display: grid; gap: 14px; } .video-field { min-width: 0; } .video-field-label { display: flex; align-items: center; gap: 5px; margin: 0 0 6px 1px; color: var(--muted); font-size: 12px; } .video-field-label .req { color: var(--red); } .video-field .mini-input, .video-field textarea { width: 100% !important; max-width: none !important; } .video-field textarea { min-height: 92px; background: var(--input-bg); border: 1px solid var(--border-strong); color: var(--text); padding: 9px 11px; border-radius: min(8px, var(--radius-control)); font: inherit; font-size: 13px; resize: vertical; } .video-channel-section { padding-top: 2px; } .video-channel-hint { margin-bottom: 8px; color: var(--muted); font-size: 12px; } .vid-channels-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px !important; } .vid-ch-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: min(8px, var(--radius-control)); cursor: pointer; font-size: 12px; transition: border-color .18s ease, background .18s ease, color .18s ease; } .vid-ch-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface2); } .vid-ch-chip:has(input:checked) { color: var(--text); border-color: color-mix(in srgb, var(--cyan) 65%, var(--border)); background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); } .vid-ch-chip input { accent-color: var(--cyan); flex: 0 0 auto; } .vid-ch-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lamp { width: 7px; height: 7px; margin-left: auto; flex: 0 0 auto; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dim) 14%, transparent); } .video-upload-progress { padding-top: 2px; } .video-upload-progress .progress-bar-bg { background: var(--bg2) !important; border: 1px solid var(--border); } .video-upload-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; } .video-list-section { min-width: 0; } .video-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .video-list-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .video-filter-select { position: relative; } .video-filter-select::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); pointer-events: none; transform: translateY(-65%) rotate(45deg); } .video-filter-select select { min-width: 142px; padding-right: 28px !important; appearance: none; background-color: var(--bg2); color: var(--text); } .video-list-total { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .video-list-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: min(10px, var(--radius-card)); overscroll-behavior: contain; } .video-data-table { min-width: 940px; border: 0 !important; table-layout: fixed; } .video-data-table thead { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--surface2) 92%, transparent); backdrop-filter: blur(6px); } .video-data-table th { padding: 11px 12px; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; white-space: nowrap; } .video-data-table td { padding: 12px; vertical-align: middle; border-top-color: var(--border); } .video-data-table tbody tr { transition: background .18s ease; } .video-data-table tbody tr:hover { background: color-mix(in srgb, var(--cyan) 5%, transparent); } .video-cover { position: relative; flex: 0 0 auto; width: 84px; height: 48px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 13%, var(--surface2)), var(--surface2)); border: 1px solid var(--border); border-radius: min(8px, var(--radius-control)); color: var(--dim); font-size: 16px; } .video-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .video-cover-duration { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 4px; background: rgba(8,12,22,.78); color: #fff; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; letter-spacing: .2px; pointer-events: none; } .video-row-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; } .video-row-title { min-width: 0; overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .video-status-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; line-height: 1.6; white-space: nowrap; } .video-status-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .video-status-chip.st-uploaded { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--amber) 34%, var(--border)); } .video-status-chip.st-distributing { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--border)); } .video-status-chip.st-all_done { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--green) 34%, var(--border)); } .video-status-chip.st-partially_done { color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--purple) 34%, var(--border)); } .video-status-chip.st-failed { color: var(--red); background: color-mix(in srgb, var(--red) 11%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--red) 36%, var(--border)); } .video-row-description { display: -webkit-box; max-width: 430px; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .video-row-meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .video-channel-status { display: flex; flex-wrap: wrap; gap: 4px; row-gap: 4px; } .vid-badge { min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 5px; border-radius: 6px; font-size: 11px; line-height: 1; border: 1px solid var(--border); background: var(--surface2); color: var(--dim); transition: transform .15s ease, border-color .15s ease, opacity .15s ease; } .vid-badge:hover { transform: translateY(-1px); } .vid-dist-info { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin: 10px 0 16px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface2); } .vid-dist-info-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .vid-dist-info-k { flex: 0 0 44px; color: var(--muted); font-size: 12px; } .vid-dist-info-v { color: var(--text); font-weight: 600; word-break: break-word; } .vid-dist-hint { margin: 0 2px 10px; font-size: 12px; color: var(--dim); line-height: 1.5; } .vid-dist-ch-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .vid-dist-ch-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface2); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .vid-dist-ch-item:hover { border-color: var(--cyan); } .vid-dist-ch-item:has(.vid-dist-ch-cb:checked) { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); background: color-mix(in srgb, var(--cyan) 8%, var(--surface2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent) inset; } .vid-dist-ch-ico { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--icon-chip); border: 1px solid var(--border-strong); } .vid-dist-ch-ico img { width: 18px; height: 18px; display: block; } .vid-dist-ch-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vid-dist-ch-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; } .vid-dist-ch-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); } .vid-dist-ch-item.is-ready .vid-dist-ch-dot { background: var(--green); } .vid-dist-ch-item.is-ready .vid-dist-ch-state { color: var(--green); } .vid-dist-ch-item.is-warn .vid-dist-ch-dot { background: var(--amber); } .vid-dist-ch-item.is-warn .vid-dist-ch-state { color: var(--amber); } .vid-dist-ch-cb { width: 16px; height: 16px; accent-color: var(--cyan); cursor: pointer; flex: 0 0 auto; } .vid-badge a { display: inline-flex; align-items: center; justify-content: center; height: 100%; } .vid-badge-pct { font-size: 10px; font-weight: 700; letter-spacing: -0.02em; } .vid-badge-mark { font-size: 11px; font-weight: 700; line-height: 1; } .vid-badge-ico { width: 15px; height: 15px; display: block; flex: 0 0 15px; object-fit: contain; } .vid-badge-ico.is-faded { opacity: .38; } .vid-badge.is-unselected { color: var(--dim); } .vid-badge.is-idle { color: var(--muted); background: color-mix(in srgb, var(--surface2) 62%, transparent); } .vid-badge.is-publishing { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, var(--surface2)); border-color: color-mix(in srgb, var(--amber) 42%, var(--border)); animation: vid-badge-pulse 1.6s ease-in-out infinite; } .vid-badge.is-success { color: var(--green); background: color-mix(in srgb, var(--green) 15%, var(--surface2)); border-color: color-mix(in srgb, var(--green) 44%, var(--border)); } .vid-badge.is-failed { color: var(--red); background: color-mix(in srgb, var(--red) 13%, var(--surface2)); border-color: color-mix(in srgb, var(--red) 42%, var(--border)); } .vid-badge.is-pending { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, var(--surface2)); border-color: color-mix(in srgb, var(--amber) 36%, var(--border)); } @keyframes vid-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .video-row-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; } .video-row-actions .pill-btn { min-height: 32px; padding: 6px 10px; font-size: 12px; white-space: nowrap; } .video-row-actions .pill-btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--border); color: var(--dim); background: var(--surface); box-shadow: none; } .video-row-actions .is-quiet { min-width: 32px; padding: 6px; flex: 0 0 32px; } .video-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; } .video-pagination .pill-btn:disabled { opacity: .45; cursor: not-allowed; } .video-pagination-info { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .video-empty { padding: 48px 20px !important; color: var(--muted); text-align: center; font-size: 12px; } .video-manager-modal button:focus-visible, .video-manager-modal a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .video-data-table tbody tr, .video-upload-panel, .vid-badge, .video-row-actions .pill-btn, .video-pagination .pill-btn { transition: none !important; animation: none !important; } } @media (max-width: 760px) { .video-manager-overlay.is-open { align-items: flex-end; padding: 0; } .video-manager-overlay.is-open .video-manager-modal { width: 100%; max-height: 94dvh; border-radius: 16px 16px 0 0; border-bottom: 0; } .video-manager-modal-head { min-height: 70px; padding: 14px 18px; } .video-manager-body { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); } .video-manager-toolbar { align-items: stretch; flex-direction: column; gap: 14px; padding-bottom: 16px; } .video-manager-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; } .video-manager-toolbar-actions .pill-btn { min-width: 0; width: 100%; } .video-manager-warning { margin: 16px 0; } .video-upload-panel { padding: 14px; } .vid-channels-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .video-list-toolbar { align-items: stretch; flex-direction: column; } .video-list-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .video-filter-select, .video-filter-select select { width: 100%; } .video-list-total { align-self: flex-end; } .video-list-wrap { overflow: visible; border: 0; } .video-data-table { min-width: 0; } .video-data-table thead { display: none; } .video-data-table, .video-data-table tbody, .video-data-table tr, .video-data-table td { display: block; } .video-data-table tbody { display: grid; gap: 10px; } .video-data-table tbody tr:has(.video-empty) { display: block; } .video-data-table td.video-empty { width: 100%; grid-area: auto !important; } .video-data-table tbody tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "cover title" "cover duration" "cover size" "cover channels" "meta meta" "actions actions"; gap: 4px 12px; padding: 12px; background: color-mix(in srgb, var(--surface2) 56%, transparent); border: 1px solid var(--border); border-radius: min(10px, var(--radius-card)); } .video-data-table tbody tr:hover { background: var(--surface2); } .video-data-table td { min-width: 0; padding: 0; border: 0; } .video-data-table td:nth-child(1) { grid-area: cover; align-self: start; } .video-data-table td:nth-child(2) { grid-area: title; } .video-data-table td:nth-child(3) { grid-area: duration; } .video-data-table td:nth-child(4) { grid-area: size; } .video-data-table td:nth-child(5) { grid-area: channels; } .video-data-table td:nth-child(6) { grid-area: meta; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .video-data-table td:nth-child(7) { grid-area: actions; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); } .video-data-table td:nth-child(n+3)::before { content: attr(data-label); display: inline-block; width: 42px; margin-right: 5px; color: var(--dim); font-size: 10px; } .video-data-table td:nth-child(5)::before { vertical-align: top; padding-top: 5px; } .video-row-description { max-width: none; } .video-row-actions { flex-wrap: wrap; } .video-row-actions .pill-btn { flex: 1 1 auto; } .video-row-actions .is-quiet { flex: 0 0 34px; } } /* ---- 视频渠道授权弹窗（与长视频管理 / 全局主题一致）---- */ .auth-overlay { z-index: 1001; padding: 24px; animation: auth-fade .18s ease-out; } @keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } } .auth-modal { display: flex; flex-direction: column; width: min(680px, 100%); max-height: min(760px, calc(100dvh - 48px)); overflow: hidden; background: var(--modal-bg); border: 1px solid var(--border-strong); border-radius: min(18px, var(--radius-card)); box-shadow: 0 30px 90px rgba(0,0,0,.58); animation: auth-pop .22s cubic-bezier(.2,.9,.3,1.2); } @keyframes auth-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .auth-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 62%, transparent); } .auth-head-icon { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 19px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 16%, var(--surface2)), var(--surface2)); border: 1px solid var(--border-strong); } .auth-head-copy { min-width: 0; } .auth-eyebrow { display: block; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.2; text-transform: uppercase; } .auth-title { margin: 3px 0 0; color: var(--text); font-size: 18px; line-height: 1.3; } .auth-subtitle { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; } .auth-close { flex: 0 0 auto; width: 34px; height: 34px; margin-left: auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; transition: .18s; } .auth-close:hover { color: var(--text); background: color-mix(in srgb, var(--surface2) 80%, transparent); border-color: var(--border-strong); } .auth-body { min-height: 0; overflow: auto; padding: 18px 20px 20px; overscroll-behavior: contain; } .auth-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .auth-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 62px; padding: 9px 6px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: min(12px, var(--radius-control)); background: color-mix(in srgb, var(--surface2) 46%, transparent); color: var(--muted); transition: border-color .18s, background .18s, color .18s, box-shadow .18s, transform .18s; } .auth-tab:hover { border-color: color-mix(in srgb, var(--cyan) 55%, var(--border)); color: var(--text); transform: translateY(-1px); } .auth-tab.active { border-color: var(--cyan); color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 12%, var(--surface2)), var(--surface2)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 16%, transparent), 0 10px 22px -14px color-mix(in srgb, var(--cyan) 70%, transparent); } .auth-tab-ico { font-size: 17px; line-height: 1.1; } .auth-tab-name { font-size: 11px; font-weight: 700; letter-spacing: .3px; } .auth-tab-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--dim); } .auth-tab-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); } .auth-tab-status.s-ready::before { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); } .auth-tab-status.s-warn::before { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); } .auth-panel { padding: 16px 16px 14px; background: color-mix(in srgb, var(--surface2) 66%, transparent); border: 1px solid var(--border-strong); border-radius: min(12px, var(--radius-control)); animation: auth-panel-in .2s ease-out; } @keyframes auth-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .auth-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--border); } .auth-panel-head .ch-ico { font-size: 18px; line-height: 1; } .auth-panel-head .ch-name { font-size: 14px; font-weight: 700; color: var(--text); } .auth-type-tag { flex: 0 0 auto; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--border)); } .auth-state { margin-left: auto; flex: 0 0 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 600; line-height: 1.6; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border-strong); } .auth-state.is-ready { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface2)); border-color: color-mix(in srgb, var(--green) 34%, var(--border)); } .auth-state.is-warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface2)); border-color: color-mix(in srgb, var(--amber) 34%, var(--border)); } .auth-state.is-none { color: var(--dim); background: color-mix(in srgb, var(--surface) 55%, transparent); border-color: var(--border); } .auth-help { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: min(8px, var(--radius-control)); color: var(--amber); font-size: 12px; line-height: 1.6; background: color-mix(in srgb, var(--amber) 9%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border)); } .auth-help-ico { flex: 0 0 auto; font-size: 14px; line-height: 1.5; } .auth-field { margin-bottom: 13px; } .auth-field:last-child { margin-bottom: 2px; } .auth-label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--muted); } .auth-label .req { color: var(--red); font-weight: 700; } .auth-label .hint { margin-left: auto; font-size: 10.5px; font-weight: 400; color: var(--dim); } .auth-input, .auth-textarea { width: 100%; padding: 9px 11px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: min(8px, var(--radius-control)); transition: border-color .18s ease, box-shadow .18s ease; } .auth-input::placeholder, .auth-textarea::placeholder { color: var(--dim); } .auth-input:focus, .auth-textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent); } .auth-textarea { min-height: 104px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; } .auth-secret-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 8px 10px; font-size: 11px; line-height: 1.55; color: var(--dim); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px dashed var(--border-strong); border-radius: min(8px, var(--radius-control)); } .auth-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 62%, transparent); } .auth-foot .btn { min-height: 38px; padding: 8px 18px; border-radius: min(10px, var(--radius-control)); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .18s; } .auth-foot .btn:hover { border-color: var(--cyan); color: var(--cyan); } .auth-foot .btn-quiet { background: transparent; border-color: transparent; color: var(--muted); } .auth-foot .btn-quiet:hover { border-color: var(--border-strong); color: var(--cyan); background: color-mix(in srgb, var(--surface2) 60%, transparent); } .auth-foot .btn-primary { border-color: transparent; color: var(--on-accent); font-weight: 700; background: var(--primary-bg); box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--cyan) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.18); } .auth-foot .btn-primary:hover { color: var(--on-accent); filter: brightness(1.06); border-color: transparent; } .auth-foot .btn-primary:disabled { opacity: .55; cursor: not-allowed; filter: none; } .auth-foot .btn .spin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color: var(--on-accent); border-radius: 50%; animation: auth-spin .7s linear infinite; } @keyframes auth-spin { to { transform: rotate(360deg); } } .auth-modal button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } @media (max-width: 640px) { .modal-overlay.auth-overlay { padding: 0; align-items: flex-end; } .auth-modal { width: 100%; max-height: 94dvh; border-radius: 16px 16px 0 0; border-bottom: 0; } .auth-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .auth-head { padding: 14px 16px 12px; } .auth-body { padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); } .auth-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); } .auth-state { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .auth-overlay, .auth-modal, .auth-panel, .auth-foot .btn .spin { animation: none !important; transition: none !important; } } /* Token 消耗弹窗：渠道/提供商 视图切换 */ .chart-tab { padding: 5px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; } .chart-tab:hover { color: var(--text); } .chart-tab-active { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface2)); color: var(--green); font-weight: 600; } /* ---- 通用弹窗（替换原生 alert/confirm，与整体主题一致）---- */ .alert-box { width: min(400px, 92vw); max-height: min(520px, 88vh); overflow: auto; box-sizing: border-box; padding: 22px 20px; background: var(--modal-bg); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.55); } .alert-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .alert-head .alert-ico { font-size: 20px; line-height: 1; } .alert-msg { font-size: 13px; color: var(--muted); line-height: 1.75; white-space: pre-wrap; word-break: break-word; } .alert-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .btn-ok { border-color: var(--green); background: rgba(55,224,138,.12); color: var(--green); font-weight: 700; } .btn-ok:hover { border-color: var(--green); color: #06121a; background: var(--green); } .btn-danger { border-color: var(--red); background: rgba(255,96,114,.14); color: var(--red); font-weight: 700; } .btn-danger:hover { border-color: var(--red); color: #fff; background: var(--red); } /* ---- 汇总指标卡 ---- */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; } .performance-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .performance-block { margin-top: 16px; padding: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; } .performance-block-title { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .sum-card { position: relative; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; } .sum-card.sum-span-2 { grid-column: span 2; } .sum-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--cyan)); opacity: .8; } .sum-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .sum-card .value { font-size: 25px; font-weight: 800; margin-top: 6px; letter-spacing: .3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-word; } .sum-card .pnl-value-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; overflow: visible; overflow-wrap: normal; word-break: normal; } .sum-card .pnl-value-main { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; word-break: normal; } .sum-card .pnl-value-pct { color: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; } .sum-card .sub { font-size: 12px; color: var(--dim); margin-top: 4px; } .sum-card .label-sub { font-size: 10px; color: var(--dim); margin-top: 3px; line-height: 1.4; } .dashboard-user-stat-card { cursor: pointer; transition: transform .15s, border-color .15s, background .15s; } .dashboard-user-stat-card:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface2); } .dashboard-user-stat-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .marketing-summary-card { cursor: pointer; transition: transform .15s, border-color .15s, background .15s; } .marketing-summary-card:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface2); } .marketing-summary-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .fear-greed-summary-card { cursor: pointer; transition: transform .15s, border-color .15s, background .15s; } .fear-greed-summary-card:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--surface2); } .fear-greed-summary-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .follower-grid-card { grid-column: span 2; } .follower-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 0; margin-top: 10px; } .follower-cell { min-width: 0; padding: 0 8px; border-left: 1px solid var(--border); } .follower-cell:first-child { padding-left: 0; border-left: none; } .follower-cell:last-child { padding-right: 0; } .follower-cell .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .follower-cell .label-sub { display: none; } .token-breakdown-sub { display: none; } .token-usage-sub { display: block; color: var(--dim); } .follower-cell .value { font-size: 20px; margin-top: 4px; } .num { font-variant-numeric: tabular-nums; } @media (max-width: 1200px) { .follower-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- 币安广场数据：与粉丝数量卡片统一网格样式 --- */ .engage-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 0; margin-top: 10px; } :root[data-theme] .engage-grid { background: transparent; border: none; } .engage-cell { min-width: 0; padding: 0 12px; border-left: 1px solid var(--border); } .engage-cell:first-child { padding-left: 0; border-left: none; } .engage-cell:last-child { padding-right: 0; } .engage-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .engage-value { display: block; font-size: 20px; font-weight: 800; margin-top: 4px; letter-spacing: .3px; line-height: 1.1; font-variant-numeric: tabular-nums; } /* 旧 ov-flex 保留给 overview 持仓/其他模块；营销互动区不再使用 */ .ov-flex { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; } .ov-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; } .ov-k { font-size: 13px; color: var(--muted); letter-spacing: .5px; } .ov-v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .3px; line-height: 1.2; text-align: center; } /* ---- 表格 ---- */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding: 10px 12px; text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; border-bottom: 1px solid var(--border); } td { padding: 11px 12px; border-bottom: 1px solid rgba(125,145,210,.06); } tbody tr { transition: background .15s; } tbody tr:hover { background: rgba(52,231,208,.04); } .profit-positive { color: var(--green); } .profit-negative { color: var(--red); } .profit-neutral { color: var(--muted); } /* ---- 涨幅榜分数 / 信号徽章（防小屏换行 + 紧凑排版） ---- */ .score-cell { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.4; } .score-cell .sep { color: var(--muted); margin: 0 2px; } .score-cell .diff { margin-left: 5px; font-weight: 600; } .sig-badge { display: inline-block; white-space: nowrap; padding: 3px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; } /* ---- 时间线 ---- */ .timeline { position: relative; } .tl-item { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(125,145,210,.06); } .tl-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .tl-dot.open { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .tl-dot.close-profit { background: var(--green); box-shadow: 0 0 8px var(--green); } .tl-dot.close-loss { background: var(--red); box-shadow: 0 0 8px var(--red); } .tl-dot.dca { background: var(--purple); box-shadow: 0 0 8px var(--purple); } .tl-dot.reduce { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .tl-dot.daily_report { background: var(--blue); box-shadow: 0 0 8px var(--blue); } .tl-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; margin-right: 6px; } .tl-tag.open { color: var(--cyan); background: rgba(52,231,208,.12); } .tl-tag.close { color: var(--green); background: rgba(55,224,138,.12); } .tl-tag.dca { color: var(--purple); background: rgba(139,109,255,.12); } .tl-tag.reduce { color: var(--amber); background: rgba(255,190,92,.12); } .tl-tag.daily_report { color: var(--blue); background: rgba(86,176,255,.12); } /* ---- 折叠 ---- */ .collapse-header { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .collapse-body { display: none; } .collapse-body.open { display: block; } .strat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 680px)); gap: 18px; } /* 卡片按内容自然高度，不被同行高卡片拉伸（grid 默认 stretch 会让 "展开全部" 高卡片把同行其他卡片也拉长，导致卡片底部留白、按钮错位） */ .strat-grid > .card { align-self: start; } @media (max-width: 1200px) { .strat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pos-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-width: 0; } .pos-meta .stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--muted); background: rgba(125,145,210,.06); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; white-space: normal; min-width: 0; max-width: 100%; } .pos-meta .stat b { font-weight: 600; overflow-wrap: anywhere; word-break: break-word; } .deploy-steps { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 2px; } .deploy-step { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); padding: 4px 8px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); min-width: 0; } .deploy-step .ds-ico { flex: 0 0 auto; width: 16px; text-align: center; color: var(--green); } .deploy-step.done { color: var(--muted); } .deploy-step.running { color: var(--text); border-color: rgba(86,176,255,.45); background: var(--surface); } .deploy-step.running .ds-ico { color: var(--cyan); } .deploy-step.failed { color: var(--red); border-color: rgba(255,96,114,.45); } .deploy-step.failed .ds-ico { color: var(--red); } .position-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; color: var(--muted); font-size: 12px; } .position-sort-label { white-space: nowrap; } .position-sort select { min-width: 112px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg2); color: var(--text); font-size: 12px; } .position-sort .sort-direction-btn { padding: 6px 10px; font-size: 12px; } .position-card-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -2px 0 10px; } .position-card-controls .position-sort { margin: 0; } .position-time-toggle { cursor: pointer; user-select: none; color: var(--muted); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .position-time-toggle:hover, .position-time-toggle:focus { color: var(--cyan); outline: none; } .position-time-toggle.active { color: var(--amber); } .position-pair-link { color: var(--cyan); cursor: pointer; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; } .position-pair-link:hover, .position-pair-link:focus { color: #fff; outline: none; } .pill-btn { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; transition: .2s; } .pill-btn:hover { border-color: var(--cyan); color: var(--cyan); } .pill-btn.active { border-color: var(--cyan); color: var(--on-accent); background: var(--cyan); font-weight: 700; } .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .mini-input { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg2); color: var(--text); font-size: 14px; } .mini-input, .input, select.input, select.mini-input, textarea.input { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .mini-input:focus, .input:focus, select.input:focus, select.mini-input:focus, textarea.input:focus { outline: none; border-color: var(--cyan) !important; box-shadow: 0 0 0 3px rgba(52,231,208,.14); background: var(--input-bg); } .mini-input:hover, .input:hover, select.input:hover, select.mini-input:hover, textarea.input:hover { border-color: rgba(52,231,208,.35); } .mini-input::placeholder, .input::placeholder { color: var(--dim); opacity: .9; } /* ---- 系统/账号级表单通用基础样式（替换掉未定义的 .input/.btn/.field-label/.chk-row，深色主题专用）---- */ .input { width: 100%; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text); font-size: 13.5px; letter-spacing: .1px; box-sizing: border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } select.input, select.mini-input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%), linear-gradient(180deg, var(--input-bg), var(--input-bg)); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, 0 0; background-size: 6px 6px, 6px 6px, 100% 100%; background-repeat: no-repeat; cursor: pointer; } select.input option, select.mini-input option { background: var(--surface); color: var(--text); } .strategy-template-control { position: relative; margin-bottom: 12px; } .strategy-template-trigger { position: relative; display: flex; align-items: center; width: 100%; min-height: 38px; padding: 8px 38px 8px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: linear-gradient(180deg, var(--surface2), var(--surface)); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .strategy-template-trigger::after { content: ""; position: absolute; right: 15px; top: 13px; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: border-color .18s ease, transform .18s ease; } .strategy-template-control.is-open .strategy-template-trigger::after { border-color: var(--cyan); transform: translateY(3px) rotate(225deg); } .strategy-template-trigger:hover, .strategy-template-control.is-open .strategy-template-trigger { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(52,231,208,.12); } .strategy-template-trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .strategy-template-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; display: none; max-height: 220px; overflow-y: auto; padding: 5px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 42px rgba(0,0,0,.42); } .strategy-template-control.is-open .strategy-template-menu { display: grid; gap: 3px; } .strategy-template-option { display: block; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .strategy-template-option:hover, .strategy-template-option:focus-visible, .strategy-template-option[aria-selected="true"] { outline: none; color: var(--text); background: color-mix(in srgb, var(--cyan) 12%, var(--surface2)); border-color: color-mix(in srgb, var(--cyan) 42%, var(--border)); } #strategy-deploy-pairs.strategy-pair-picker { display: block !important; width: 100%; max-height: min(42vh, 360px); overflow: auto; padding: 8px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 0; background: color-mix(in srgb, var(--surface2) 26%, transparent); color: var(--muted); scrollbar-gutter: stable; } .strategy-pair-list { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; } .strategy-pair-header, .strategy-pair-row { display: grid; grid-template-columns: 28px minmax(88px, 0.9fr) minmax(130px, 1.25fr) minmax(110px, 1fr) minmax(72px, auto); align-items: center; gap: 10px; min-width: 0; min-height: 38px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; } .strategy-pair-header { min-height: 30px; padding-top: 3px; padding-bottom: 3px; border-color: transparent; border-bottom-color: var(--border); border-radius: 6px 6px 0 0; background: var(--surface2); color: var(--muted); cursor: default; position: sticky; top: -8px; z-index: 1; } .strategy-pair-header span { font-size: 11px; font-weight: 600; letter-spacing: .2px; } .strategy-pair-row:hover { border-color: rgba(52,231,208,.42); background: color-mix(in srgb, var(--cyan) 6%, var(--surface2)); } .strategy-pair-row:has(input:checked) { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); background: color-mix(in srgb, var(--cyan) 7%, var(--surface2)); } .strategy-pair-row input { margin: 0; } .strategy-pair-symbol { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .strategy-pair-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .strategy-pair-sector { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .strategy-pair-risk { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--red) 30%, var(--border)); } .strategy-pair-risk[data-risk="medium"] { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface2)); border-color: color-mix(in srgb, var(--amber) 30%, var(--border)); } .strategy-pair-risk[data-risk="low"] { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface2)); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); } @media (max-width: 520px) { #strategy-deploy-pairs.strategy-pair-picker { max-height: min(38vh, 300px); padding: 6px; } .strategy-pair-header, .strategy-pair-row { grid-template-columns: 24px minmax(44px, 1fr) minmax(56px, 1.4fr) minmax(44px, 1fr) minmax(48px, auto); gap: 5px; padding: 5px 6px; } .strategy-pair-symbol { font-size: 11px; } .strategy-pair-name { font-size: 11px; } .strategy-pair-sector { font-size: 10px; } .strategy-pair-risk { font-size: 10px; padding: 1px 6px; } } /* ---- 添加持仓策略弹窗（部署模板 / 手动部署）---- */ @keyframes posModalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .position-strategy-modal { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); max-height: 92vh; background: var(--modal-bg); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.55), var(--shadow); animation: posModalIn .28s ease both; overflow: hidden; } .position-strategy-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5; background: linear-gradient(90deg, var(--cyan), var(--purple), var(--amber)); } .position-strategy-modal-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px; background: radial-gradient(420px 140px at 88% -40%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--surface2) 80%, transparent), color-mix(in srgb, var(--surface) 40%, transparent)); border-bottom: 1px solid var(--border); } .position-strategy-modal-head::after { content: ""; position: absolute; right: -32px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--purple) 18%, transparent), transparent 70%); pointer-events: none; } .position-strategy-modal-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; background: color-mix(in srgb, var(--cyan) 16%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border)); font-size: 22px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cyan) 40%, transparent); } .position-strategy-modal-title-wrap { min-width: 0; } .position-strategy-modal-title-text { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.3; letter-spacing: .2px; } .position-strategy-modal-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; line-height: 1.5; } .pos-sub-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 9%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--border)); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; } .position-strategy-modal-close { margin-left: auto; flex: 0 0 auto; position: relative; z-index: 2; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface2) 70%, transparent); border: 1px solid var(--border-strong); color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; transition: .18s; } .position-strategy-modal-close:hover { color: #fff; background: color-mix(in srgb, var(--red) 82%, transparent); border-color: color-mix(in srgb, var(--red) 60%, var(--border)); } .position-strategy-modal-tabs { padding: 14px 20px 12px; } .position-strategy-modal-tabs .sub-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 0; padding: 4px; border: 1px solid var(--border-strong); border-radius: 12px; background: color-mix(in srgb, var(--surface2) 55%, var(--surface)); } .position-strategy-modal-tabs .sub-tab { justify-content: center; padding: 9px 12px; border-radius: 8px; border-color: transparent; background: transparent; color: var(--muted); font-size: 13px; } .position-strategy-modal-tabs .sub-tab .ico { font-size: 14px; } .position-strategy-modal-tabs .sub-tab:hover { border-color: transparent; } .position-strategy-modal-tabs .sub-tab.active { color: var(--text); background: color-mix(in srgb, var(--cyan) 12%, var(--surface)); border-color: color-mix(in srgb, var(--cyan) 38%, var(--border)); box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--cyan) 30%, transparent); } .position-strategy-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 18px; scrollbar-gutter: stable; } .deploy-info-callout { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px 11px 14px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--cyan) 26%, var(--border)); border-left: 3px solid var(--cyan); border-radius: 10px; background: color-mix(in srgb, var(--cyan) 7%, var(--surface2)); color: var(--muted); font-size: 12px; line-height: 1.6; } .deploy-info-callout .ico { flex: 0 0 auto; line-height: 1.4; } .deploy-section { margin-bottom: 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 8px 22px -16px rgba(0,0,0,.4); } .deploy-section-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .3px; margin: 0 0 12px 0; } .deploy-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); } .deploy-section-title .req { color: rgba(255,96,114,.9); font-weight: 600; } .deploy-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--on-accent); background: var(--primary-bg); box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--cyan) 45%, transparent); } .deploy-field-note { font-size: 12px; color: var(--dim); margin: -2px 0 12px 2px; line-height: 1.5; } .deploy-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .deploy-msg { min-height: 18px; font-size: 12px; color: var(--muted); margin: 2px 0 10px; } .deploy-footer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; margin: 8px -20px -18px; padding: 14px 20px 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--border-strong); } .deploy-footer .btn { min-width: 104px; } .strategy-pair-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 2px 9px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .strategy-pair-toolbar .toolbar-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; } .strategy-pair-count { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border)); color: var(--cyan); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .strategy-pair-count::before { content: "✓"; font-size: 10px; font-weight: 800; } .strategy-pair-note { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--cyan); margin-left: auto; white-space: nowrap; } .strategy-pair-row input[type="checkbox"], .strategy-pair-toolbar input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: 0 0 auto; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--input-bg); cursor: pointer; position: relative; transition: border-color .15s, background .15s, box-shadow .15s; } .strategy-pair-row input[type="checkbox"]:hover, .strategy-pair-toolbar input[type="checkbox"]:hover { border-color: var(--cyan); } .strategy-pair-row input[type="checkbox"]:checked, .strategy-pair-toolbar input[type="checkbox"]:checked { background: var(--primary-bg); border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 16%, transparent); } .strategy-pair-row input[type="checkbox"]:checked::after, .strategy-pair-toolbar input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border-right: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(45deg); } .strategy-pair-row input[type="checkbox"]:indeterminate, .strategy-pair-toolbar input[type="checkbox"]:indeterminate { border-color: var(--cyan); } .strategy-pair-row input[type="checkbox"]:indeterminate::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: var(--cyan); border: none; border-radius: 1px; } @media (max-width: 520px) { .deploy-grid-2 { grid-template-columns: 1fr; } .strategy-pair-note { margin-left: 0; width: 100%; } .position-strategy-modal-head { padding: 14px 14px 12px; gap: 10px; } .position-strategy-modal-ico { width: 40px; height: 40px; font-size: 19px; } .position-strategy-modal-title-text { font-size: 16px; } .position-strategy-modal-tabs { padding: 12px 14px 10px; } .position-strategy-modal-body { padding: 14px 14px 16px; } .deploy-footer { margin: 8px -14px -16px; padding: 12px 14px 14px; } } input[type="password"].input { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1.5px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; min-height: 40px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .2s ease; user-select: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .btn:hover { transform: translateY(-1px); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 6px 14px rgba(0,0,0,.3); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-primary { background: var(--primary-bg); color: var(--on-accent); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); box-shadow: 0 1px 3px color-mix(in srgb, var(--cyan) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.15); } .btn-primary:hover { color: var(--on-accent); filter: brightness(1.06); border-color: var(--cyan); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); box-shadow: none; } .btn-ghost:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.03); } .field-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); letter-spacing: .25px; text-transform: none; font-weight: 600; margin: 0 0 6px 2px; } .field-label .req { color: rgba(255,96,114,.9); font-size: 11px; } .field-label .tip { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 11px; } .chk-row { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 0 0; border-radius: 11px; background: var(--surface2); border: 1px dashed var(--border); cursor: pointer; font-size: 13px; color: var(--text); transition: .2s ease; user-select: none; } .chk-row:hover { background: color-mix(in srgb, var(--red) 8%, var(--surface2)); border-color: color-mix(in srgb, var(--red) 55%, var(--border)); border-style: solid; color: var(--text); } .chk-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex-shrink: 0; margin: 0; padding: 0; box-sizing: border-box; line-height: 1; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface); position: relative; cursor: pointer; transition: .18s ease; } .chk-row input[type="checkbox"]:checked { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(52,231,208,.14); } .chk-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 0px; width: 5px; height: 10px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .chk-row.danger:hover { background: color-mix(in srgb, var(--red) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--red) 65%, var(--border)); } .chk-row.danger input[type="checkbox"]:checked { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,96,114,.15); } .chk-row.danger input[type="checkbox"]:checked::after { border-color: #fff; } /* 表单内“输入+右侧动作”的组合容器：密码显示切换等 */ .input-group { display: flex; align-items: stretch; gap: 6px; } .input-group .input { flex: 1 1 auto; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } .input-group .btn-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 0 12px; border-radius: 11px; border-top-left-radius: 0; border-bottom-left-radius: 0; border: 1px solid var(--border-strong); background: var(--surface2); color: var(--muted); cursor: pointer; transition: .2s ease; font-size: 13px; } .input-group .btn-ico:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(52,231,208,.06); } /* Prompt 模板专区视觉：琥珀强调条 + Hero CTA + 3 条使用建议 */ .syscfg-section.is-prompt { border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); background: var(--surface2); position: relative; overflow: hidden; } .syscfg-section.is-prompt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--amber), rgba(255,193,7,.2)); } .syscfg-section.is-prompt::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; background: radial-gradient(closest-side, rgba(255,193,7,.1), transparent 70%); pointer-events: none; } .prompt-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; padding: 14px 16px; margin: 12px 0 10px; background: color-mix(in srgb, var(--amber) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border)); border-radius: 14px; } .prompt-hero-ico { width: 52px; height: 52px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: color-mix(in srgb, var(--amber) 16%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .prompt-hero-main { min-width: 0; } .prompt-hero-title { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: .1px; margin-bottom: 4px; } .prompt-hero-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .btn-prompt-optimize { white-space: nowrap; background: linear-gradient(180deg, var(--amber), #e6b32a) !important; color: #1d1400 !important; border-color: rgba(255,193,7,.55) !important; font-weight: 800; letter-spacing: .2px; padding: 12px 18px !important; min-height: 44px; box-shadow: 0 2px 8px rgba(255,193,7,.18), inset 0 1px 0 rgba(255,255,255,.22) !important; } .btn-prompt-optimize:hover { filter: brightness(1.05); border-color: rgba(255,193,7,.85) !important; } .prompt-history-actions { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; } .prompt-history-status { color: var(--muted); font-size: 12px; } .prompt-history-panel { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; } .prompt-history-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 700; } .prompt-history-panel-head .pill-btn { margin-left: auto; min-height: 30px; padding: 5px 9px; } .prompt-history-list { display: grid; gap: 0; } .prompt-history-empty { padding: 14px 12px; color: var(--muted); font-size: 12px; } .prompt-history-item { padding: 12px; border-bottom: 1px solid var(--border); } .prompt-history-item:last-child { border-bottom: 0; } .prompt-history-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12px; } .prompt-history-type { color: var(--text); font-weight: 700; } .prompt-history-source { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--border)); border-radius: 5px; color: var(--cyan); } .prompt-history-meta { margin-top: 6px; color: var(--muted); font-size: 12px; } .prompt-history-analysis { margin-top: 8px; color: var(--text); font-size: 12px; line-height: 1.6; white-space: pre-wrap; } .prompt-history-toggle { margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--cyan); cursor: pointer; font: inherit; font-size: 12px; } .prompt-history-toggle:hover { color: var(--text); text-decoration: underline; } .prompt-history-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .prompt-history-prompt { min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); } .prompt-history-prompt-label { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; } .prompt-history-prompt pre { max-height: 260px; margin: 0; overflow: auto; color: var(--text); font: 11px/1.55 "SF Mono", ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; } @media (max-width: 640px) { .prompt-history-prompts { grid-template-columns: 1fr; } } .prompt-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; } .prompt-tip { padding: 10px 12px; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 11px; font-size: 12px; color: var(--muted); line-height: 1.6; } .prompt-tip b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; line-height: 1; margin-right: 6px; font-size: 11px; color: #1d1400; background: var(--amber); border-radius: 50%; font-weight: 800; vertical-align: -2px; } @media (max-width: 820px) { .prompt-hero { grid-template-columns: auto minmax(0, 1fr); } .prompt-hero .btn-prompt-optimize { grid-column: 1 / -1; width: 100%; justify-content: center; } .prompt-tips { grid-template-columns: 1fr; } } /* 说明块：带 code 高亮的信息条 */ .syscfg-desc code { padding: 1px 7px 2px; border-radius: 6px; background: rgba(52,231,208,.1); border: 1px solid rgba(52,231,208,.22); color: var(--cyan); font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 600; } .syscfg-desc b { color: var(--text); font-weight: 700; } /* 平仓弹窗持仓行：display 由 CSS 类兜底（label 默认 inline， 过滤搜索隐藏/恢复时仅靠 JS 写内联 display 容易崩塌，此处作为可靠回退） */ .fx-row { display: flex; align-items: center; gap: 10px; } .empty-state { text-align: center; color: var(--muted); padding: 44px 0; font-size: 32px; } .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll > table { min-width: 500px; } /* 飞书信号列表：限定高度，滚动到底部自动加载下一页（默认 10 条/页） */ #trend-pane-feishu .table-scroll { max-height: 62vh; overflow-y: auto; } /* 持仓卡片：表格自适应填满卡片宽度，避免横向滚动条 */ #positions-cards .table-scroll > table { width: 100%; min-width: 0; } #positions-cards .position-table td { white-space: nowrap; } .overview-summary { grid-template-columns: repeat(7, minmax(0, 1fr)); } .overview-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; } .overview-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; } .overview-detail-label { color: var(--muted); font-size: 12px; font-weight: 700; } .overview-view-toggle { min-width: 34px; min-height: 34px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; } .mk-config-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "schedules" "actions"; gap: 20px 28px; align-items: start; padding: 6px 2px 2px; } .mk-config-group { position: relative; grid-area: primary; align-self: start; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 2px 18px 0 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; } .mk-config-group::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--border-strong); opacity: .8; } .mk-config-group.is-primary { border-color: transparent; } .mk-config-group.is-primary::before { background: var(--cyan); opacity: .95; } .mk-config-group-head { display: flex; align-items: center; gap: 8px; min-height: 25px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .mk-config-group-icon { flex: 0 0 auto; font-size: 15px; line-height: 1; filter: saturate(.85); } .mk-config-group-title { min-width: 0; color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; } .mk-config-group-note { margin-left: auto; color: var(--dim); font-size: 11px; white-space: nowrap; } .mk-auto-post-switch { margin-left: 4px; flex: 0 0 auto; } .mk-auto-post-interval { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px !important; margin-top: 2px; padding: 9px 12px !important; border: 1px solid color-mix(in srgb, var(--cyan) 20%, var(--border)) !important; border-radius: 8px !important; background: color-mix(in srgb, var(--surface2) 62%, transparent) !important; } .mk-auto-post-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mk-auto-post-copy strong { color: var(--text); font-size: 13px; font-weight: 650; } .mk-auto-post-copy small { color: var(--dim); font-size: 10px; white-space: nowrap; } .mk-auto-post-value { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; } .mk-auto-post-value .mini-input { width: 72px !important; height: 34px; } .mk-auto-post-value > span { color: var(--muted); font-size: 12px; white-space: nowrap; } .mk-config-group-fields { display: flex; flex: 1; flex-direction: column; gap: 3px; } .mk-config-group .mk-config-field { width: 100%; justify-content: space-between; min-height: 40px; padding: 8px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 0; background: transparent; } .mk-config-group .mk-config-field > span:first-child { min-width: 0; } .mk-config-input { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-width: 0; } .mk-config-input > span { color: var(--muted); font-size: 12px; white-space: nowrap; } .mk-config-input .mini-input { box-sizing: border-box; flex: 0 0 auto; min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; } .mk-config-preview { width: 100%; min-height: 36px; margin-top: auto; justify-content: center; background: transparent; border-color: var(--border-strong); box-shadow: none; } .mk-config-preview:hover { background: rgba(52,231,208,.07); border-color: var(--cyan); } .mk-config-schedules { grid-area: schedules; display: flex; flex-direction: column; min-width: 0; padding: 0 2px; } .mk-config-schedules-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 25px; padding: 1px 0 11px; border-bottom: 1px solid var(--border-strong); } .mk-config-schedules-title { color: var(--text); font-size: 13px; font-weight: 700; } .mk-config-schedules-note { color: var(--dim); font-size: 11px; } /* 定时发布整体折叠：头部可点击，内容默认收起 */ .mk-config-schedules-head .mk-channel-toggle { display: flex; align-items: center; gap: 12px; padding: 0; } .mk-config-schedules-head .mk-channel-toggle .mk-config-schedules-note { margin-left: auto; } .mk-config-schedules-head .mk-channel-toggle .mk-channel-chevron { margin-left: 4px; font-size: 16px; } .mk-schedules-content[hidden] { display: none; } .mk-config-schedule-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto 156px; gap: 24px; align-items: center; min-height: 64px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent); transition: background .15s ease, padding .15s ease; } .mk-config-schedule-row:hover { padding-left: 10px; padding-right: 10px; background: rgba(52,231,208,.035); } .mk-config-schedule-row:last-child { border-bottom: 0; } /* 发帖总开关行：仅两列（标题 + 开关），无预览按钮列 */ .mk-config-schedule-row.mk-master-row { grid-template-columns: minmax(220px, 1fr) auto; gap: 24px; } .mk-config-schedule-row.mk-master-row .mk-config-schedule-icon { filter: saturate(.9); } /* 发帖总开关旁：各渠道今日发帖计数（达到每日上限的渠道自动暂停下发并高亮） */ .mk-master-stats { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; max-width: 560px; min-width: 0; } .mk-master-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .mk-master-chip .chip-name { color: var(--text); font-weight: 600; } .mk-master-chip b { color: var(--text); } .mk-master-chip.is-paused { background: rgba(255, 77, 79, .12); border-color: var(--red); color: var(--red); } .mk-master-chip.is-paused b, .mk-master-chip.is-paused .chip-name { color: var(--red); } .mk-config-schedule-label { display: flex; align-items: center; gap: 10px; min-width: 0; } .mk-config-schedule-icon { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .mk-config-schedule-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mk-config-schedule-title { color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; } .mk-config-schedule-desc { color: var(--dim); font-size: 11px; white-space: nowrap; } .mk-config-schedule-controls { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 116px; } .mk-config-schedule-time { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; } .mk-config-schedule-time .mini-input { width: 60px !important; min-width: 60px; box-sizing: border-box; text-align: center; font-variant-numeric: tabular-nums; } .mk-config-schedule-preview { width: 100%; min-height: 36px; justify-content: center; background: transparent; border-color: var(--border-strong); box-shadow: none; white-space: nowrap; } .mk-config-schedule-preview:hover { border-color: var(--cyan); background: rgba(52,231,208,.07); } .mk-config-actions { grid-area: actions; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; padding: 14px 0 2px; border-top: 1px solid var(--border-strong); } .mk-config-action { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 0 10px; border-left: 1px solid var(--border); } .mk-config-action:first-child { padding-left: 0; border-left: 0; } .mk-config-action:last-child { padding-right: 0; } .mk-config-action-title { color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .3px; } .mk-config-action-controls { display: flex; flex-wrap: wrap; gap: 7px; align-items: stretch; min-width: 0; } .mk-config-action-controls > .pill-btn { flex: 1 1 0; width: auto; min-height: 38px; justify-content: center; } .mk-config-action-controls .mk-video-manager-action { display: flex; flex: 1 1 145px; min-width: 0; padding: 0; border: 0; background: transparent; } .mk-config-action-controls .mk-video-manager-action .pill-btn { width: 100%; } .mk-config-action-controls > :only-child { flex: 1 1 100%; } .mk-config-field { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); min-height: 38px; } .pill-btn.is-quiet { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; } .pill-btn.is-quiet:hover { border-color: var(--border-strong); color: var(--cyan); background: rgba(255,255,255,.03); } @media (max-width: 1100px) { .mk-config-grid { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 16px 18px; } } .mk-x-row { display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; gap: 12px 14px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: border-color .15s ease, background .15s ease; } .mk-x-row:hover { border-color: var(--border-strong); background: var(--surface2); } .mk-x-row + .mk-x-row { margin-top: 10px; } .mk-x-row:not(.mk-channel-row) { margin-top: 10px; padding: 14px 0 4px; border: 0; border-top: 1px solid var(--border-strong); border-radius: 0; background: transparent; } .mk-x-row:not(.mk-channel-row):hover { border-color: var(--border-strong); background: transparent; } .mk-x-row .mk-x-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); font-weight: 600; padding-right: 12px; border-right: 1px dashed var(--border); min-height: 32px; } .mk-x-row .mk-x-label .emoji { font-size: 16px; filter: drop-shadow(0 0 4px rgba(52,231,208,.2)); } .mk-x-row .mk-x-main { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-width: 0; } .mk-x-row .mk-x-main .field-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); } .mk-x-row .mk-x-main .field-chip > span:first-child, .mk-x-row .mk-x-main > span { font-size: 12px; color: var(--muted); } .mk-x-row .mk-x-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; } .mk-x-row .mk-x-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: 2px; border-top: 1px dashed rgba(255,255,255,.06); font-size: 12px; color: var(--dim); } .mk-x-row .mk-x-status .left, .mk-x-row .mk-x-status .right { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } .mk-channel-row { display: block; padding: 0; overflow: hidden; } .mk-channel-header { display: flex; align-items: center; min-height: 58px; padding: 8px 14px; } .mk-channel-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; } .mk-channel-toggle:hover { color: var(--cyan); } .mk-channel-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 5px; } .mk-channel-toggle .emoji { font-size: 16px; filter: drop-shadow(0 0 4px rgba(52,231,208,.2)); flex: 0 0 auto; } .mk-channel-title { font-size: 13px; font-weight: 600; white-space: nowrap; } .mk-channel-summary { min-width: 0; margin-left: auto; overflow: hidden; color: var(--dim); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .mk-channel-summary.is-enabled { color: var(--green); } .mk-channel-chevron { flex: 0 0 auto; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .18s ease, color .18s ease; } .mk-channel-toggle:hover .mk-channel-chevron { color: var(--cyan); } .mk-channel-toggle[aria-expanded="true"] .mk-channel-chevron { transform: rotate(90deg); } .mk-channel-content { display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; gap: 12px 14px; align-items: center; padding: 0 14px 12px; } .mk-channel-content[hidden] { display: none; } .mk-channel-content .mk-x-main { min-width: 0; } .mk-channel-content .mk-x-status { grid-column: 1 / -1; } /* 渠道同步整体折叠区：头部行与 X 推文·改稿行同款（无边框、上分隔线），展开后渠道行各自成卡片 */ .mk-channel-group-header { display: flex; align-items: center; } .mk-channel-group-header .mk-channel-toggle { padding: 4px 0; } .mk-channel-group-header .mk-channel-title { padding-right: 12px; border-right: 1px dashed var(--border); font-size: 13px; } .mk-channel-group-header .mk-channel-summary { margin-left: 12px; } .mk-channel-group-content { margin-top: 10px; } .mk-channel-group-content[hidden] { display: none; } .mk-help { margin-top: 10px; font-size: 12px; color: var(--dim); } /* ---- LLM 服务商配置（分组卡片） ---- */ .llm-group { margin-bottom: 12px; } .llm-group:last-child { margin-bottom: 0; } .llm-group-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; } .llm-group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(52,231,208,.5); } .llm-group-count { margin-left: auto; font-weight: 700; color: var(--cyan); background: rgba(52,231,208,.1); border-radius: 20px; padding: 1px 9px; font-size: 11px; } .llm-group-body { display: flex; flex-direction: column; gap: 8px; } .llm-group-url { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface2); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; } .llm-group-url > label { font-size: 11px; color: var(--dim); letter-spacing: .3px; flex-shrink: 0; min-width: 52px; } .llm-group-url > input { flex: 1; font-size: 13px; padding: 7px 12px; } .llm-prov-row { position: relative; z-index: 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); } .llm-prov-row.llm-tier-open { z-index: 20; } .llm-prov-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface2); border-bottom: 1px solid var(--border); } .llm-prov-idx { font-weight: 700; color: var(--cyan); font-size: 12px; min-width: 20px; opacity: .85; } .llm-prov-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 12px; } .llm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .llm-field > label { font-size: 11px; color: var(--dim); letter-spacing: .3px; } .llm-field > input { width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg2); color: var(--text); font-size: 13px; } .llm-tier-control { position: relative; min-width: 0; --tier-color: var(--cyan); } .llm-tier-trigger { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 8px 34px 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: linear-gradient(180deg, var(--surface2), var(--surface)); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .llm-tier-trigger::after { content: ""; position: absolute; right: 14px; top: 12px; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: border-color .18s ease, transform .18s ease; } .llm-tier-control.is-open .llm-tier-trigger::after { border-color: var(--tier-color); transform: translateY(3px) rotate(225deg); } .llm-tier-trigger:hover, .llm-tier-control.is-open .llm-tier-trigger { border-color: var(--tier-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-color) 12%, transparent); } .llm-tier-trigger:focus-visible { outline: 2px solid var(--tier-color); outline-offset: 2px; } .llm-tier-dot, .llm-tier-option-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tier-color); box-shadow: 0 0 8px color-mix(in srgb, var(--tier-color) 48%, transparent); } .llm-tier-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .llm-tier-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; display: none; max-height: 248px; overflow-y: auto; padding: 5px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb, var(--cyan) 8%, transparent); } .llm-tier-control.is-open .llm-tier-menu { display: grid; gap: 3px; } .llm-tier-option { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .llm-tier-option:hover, .llm-tier-option:focus-visible { outline: none; color: var(--text); background: color-mix(in srgb, var(--tier-color) 9%, var(--surface2)); border-color: color-mix(in srgb, var(--tier-color) 35%, var(--border)); } .llm-tier-option[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--tier-color) 14%, var(--surface2)); border-color: color-mix(in srgb, var(--tier-color) 48%, var(--border)); } .llm-tier-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .llm-tier-option-title { font-weight: 700; } .llm-tier-option-hint { overflow: hidden; color: var(--dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .llm-tier-option[aria-selected="true"] .llm-tier-option-hint { color: var(--tier-color); } .llm-tier-control[data-tier="primary_always"] { --tier-color: var(--cyan); } .llm-tier-control[data-tier="primary"] { --tier-color: #70a7ff; } .llm-tier-control[data-tier="secondary"] { --tier-color: var(--amber); } .llm-tier-control[data-tier="backup"] { --tier-color: #b38cff; } .llm-tier-hint { display: block; margin: 4px 2px 0; overflow: hidden; color: var(--tier-color); font-size: 10.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .llm-field-warn { color: var(--amber); } .llm-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; } .llm-badge.active { color: var(--green); background: rgba(55,224,138,.13); } .llm-badge.locked { color: var(--amber); background: rgba(255,193,7,.13); } .llm-badge.failed { color: var(--red); background: rgba(255,96,114,.13); cursor: pointer; } .llm-badge.cooldown { color: var(--amber); background: rgba(255,193,7,.13); cursor: pointer; } .llm-badge.default { color: var(--cyan); background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.3); } .llm-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); cursor: pointer; flex-shrink: 0; } .llm-toggle input { accent-color: var(--cyan); margin: 0; } .llm-btn { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); border: 1px solid var(--border-strong); background: var(--bg2); cursor: pointer; transition: .15s; flex-shrink: 0; line-height: 1; } .llm-btn.llm-btn-text { width: auto; height: 26px; padding: 0 9px; font-size: 11.5px; white-space: nowrap; } .llm-btn:hover { color: var(--cyan); border-color: var(--cyan); } .llm-btn.danger:hover { color: var(--red); border-color: var(--red); } .llm-params { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 4px 0 12px; } .llm-hint { font-size: 10.5px; color: var(--dim); line-height: 1.3; } @media (max-width: 720px) { .llm-prov-body { grid-template-columns: 1fr; } .llm-params { grid-template-columns: 1fr; } } @media (max-width: 820px) { /* ---- 顶部导航 ---- */ .topnav { flex-wrap: wrap; padding: 8px 12px; gap: 8px 12px; } .nav-toggle { display: flex; } .nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; display: none; overflow: visible; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .nav.open { display: flex; } .nav-item { justify-content: flex-start; } .topnav-right { gap: 10px; margin-left: auto; } .clock, #last-updated { display: none; } /* ---- 主内容区 ---- */ .content { padding: 14px 10px 36px; } /* ---- 策略卡片：单列 ---- */ .strat-grid { grid-template-columns: 1fr; gap: 12px; } /* ---- 汇总指标卡：最小宽度缩小，小屏 2 列 ---- */ .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .performance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sum-card { padding: 12px 14px; } .sum-card .value { font-size: 20px; margin-top: 4px; } .sum-card .label { font-size: 10px; } .sum-card .sub { font-size: 11px; } #ov-long-short-pnl { font-size: 12px !important; white-space: nowrap; } #ov-leverage-ratio { white-space: nowrap !important; } #overview-summary #ov-leverage-ratio { white-space: nowrap !important; } /* ---- 分类明细卡片（公域/私域/信号）：强制 2 列 ---- */ #overview-cats.summary-grid { grid-template-columns: repeat(2, 1fr); } /* ---- 卡片内边距减小 ---- */ .card { padding: 14px; border-radius: 12px; } .card-header h3 { font-size: 14px; } /* ---- 图表高度缩小 ---- */ #roi-chart { height: 240px !important; } #overview-chart { height: 280px !important; } /* ---- 带单信息行：紧凑排列 ---- */ #lead-margin, #lead-pnl, #lead-metrics, #lead-copy-scale { gap: 12px !important; font-size: 12px !important; } #lead-margin-val { font-size: 15px !important; } /* ---- 表格紧凑 ---- */ table { font-size: 12px; } th, td { padding: 8px 6px; } #scores-table { font-size: 11px; } #scores-table th, #scores-table td { padding: 7px 5px; } /* ---- 通知流时间线 ---- */ .tl-item { gap: 10px; padding: 10px 0; } .tl-dot { width: 8px; height: 8px; margin-top: 4px; } /* ---- 通知流过滤栏：小屏自适应 ---- */ @media (max-width: 600px) { .notify-filter-bar { flex-direction: column; align-items: stretch; } .notify-search { width: 100%; } .notify-search input { flex: 1; width: auto; } } /* ---- 持仓 Tab 切换栏 ---- */ .sub-tabs { gap: 6px; margin-bottom: 12px; } .sub-tab { padding: 6px 12px; font-size: 12px; gap: 5px; } .sub-tab .ico { font-size: 12px; } /* ---- 按钮缩小 ---- */ .pill-btn { padding: 7px 12px; font-size: 12px; } /* ---- 评分详情展开行 ---- */ .score-detail-row td { padding: 10px 12px; } .d-tag { font-size: 11px; padding: 4px 8px; } .d-tag b { font-size: 11px; } .tag-wrap { gap: 5px; } } /* ---- 小手机（≤480px）：进一步压缩 ---- */ @media (max-width: 480px) { .summary-grid { grid-template-columns: 1fr; gap: 8px; } .performance-metrics { grid-template-columns: 1fr; } #overview-cats.summary-grid { grid-template-columns: 1fr; } .content { padding: 10px 8px 32px; } .card { padding: 12px; } .card-header { margin-bottom: 10px; } #roi-chart { height: 200px !important; } #overview-chart { height: 240px !important; } #lead-margin, #lead-pnl, #lead-metrics, #lead-copy-scale { gap: 8px !important; font-size: 11px !important; } .strat-grid { gap: 10px; } .topnav { padding: 6px 8px; gap: 6px; } .brand { font-size: 14px; } .logout-btn { padding: 6px 10px; font-size: 11px; } .live-badge { font-size: 11px; padding: 4px 8px; } .sub-tab { padding: 5px 10px; font-size: 11px; } table { font-size: 11px; } th, td { padding: 6px 4px; } .tl-item { gap: 8px; font-size: 12px; } } /* ---- 涨幅榜行可点击展开详情（内联，非弹窗） ---- */ #scores-table tbody tr.score-row { cursor: pointer; } #scores-table tbody tr.score-row:hover { background: rgba(52,231,208,.07); } #scores-table tbody tr.score-row.open { background: rgba(52,231,208,.09); } .score-detail-row td { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 14px 22px 16px; } .score-detail-row .sym-line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .score-detail-row .sym-line .sym { font-size: 18px; font-weight: 800; } .tag-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; } .d-sep { width: 100%; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin: 14px 0 6px; border-top: 1px solid var(--border); padding-top: 10px; } .d-tag { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface2); border: 1px solid var(--border); } .d-tag b { font-size: 13px; } .tag-rsi-hot { background: rgba(255,96,114,.16); border-color: rgba(255,96,114,.4); color: #ffd2d8; } .tag-rsi-cool { background: rgba(86,176,255,.14); border-color: rgba(86,176,255,.35); color: #d6ecff; } .tag-up { background: rgba(55,224,138,.14); border-color: rgba(55,224,138,.35); color: #c9f7df; } .tag-down { background: rgba(255,96,114,.14); border-color: rgba(255,96,114,.35); color: #ffd2d8; } .tag-atr { background: rgba(139,109,255,.14); border-color: rgba(139,109,255,.32); color: #e3dbff; } .tag-fund-pos { background: rgba(255,96,114,.15); border-color: rgba(255,96,114,.38); color: #ffd2d8; } .tag-fund-neg { background: rgba(55,224,138,.14); border-color: rgba(55,224,138,.34); color: #c9f7df; } .tag-pos { background: rgba(125,145,210,.12); border-color: var(--border-strong); color: var(--text); } .tag-sector { background: rgba(46,204,255,.12); border-color: rgba(46,204,255,.34); color: #cdeeff; } .tag-history { background: rgba(255,190,92,.12); border-color: rgba(255,190,92,.34); color: #ffe6bf; } .score-kline-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;position:relative; } .score-kline-panel { min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:8px;overflow:hidden; } .score-kline-panel-title { font-size:11px;color:var(--dim);padding:5px 6px 3px;display:flex;justify-content:space-between;align-items:center;gap:4px; } .score-kline-panel-title span:last-child { color:var(--muted);font-size:10px; } .score-kline-chart { width:100%;height:184px;display:block;cursor:crosshair; } .kline-tab { font-size:12px;padding:3px 12px;border-radius:5px;border:1px solid var(--border); background:transparent;color:var(--dim);cursor:pointer;transition:all .2s } .kline-tab.active { background:var(--cyan);color:#000;border-color:var(--cyan) } .kline-tab:hover:not(.active) { border-color:var(--cyan);color:var(--cyan) } @media (max-width: 1100px) { .score-kline-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width: 680px) { .score-kline-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .score-kline-chart { height:170px; } } .tag-resist { background: rgba(255,190,92,.14); border-color: rgba(255,190,92,.34); color: #ffe6bf; } /* 浅色主题使用深色语义文字，避免深色主题的浅色标签文字在纸面上失去对比度。 */ :root[data-theme="light"] :is(.tag-rsi-hot, .tag-down, .tag-fund-pos) { color: var(--tag-hot); background: color-mix(in srgb, var(--tag-hot) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-hot) 38%, transparent); } :root[data-theme="light"] :is(.tag-rsi-cool) { color: var(--tag-cool); background: color-mix(in srgb, var(--tag-cool) 10%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-cool) 36%, transparent); } :root[data-theme="light"] :is(.tag-up, .tag-fund-neg) { color: var(--tag-positive); background: color-mix(in srgb, var(--tag-positive) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-positive) 36%, transparent); } :root[data-theme="light"] .tag-atr { color: var(--tag-accent); background: color-mix(in srgb, var(--tag-accent) 10%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-accent) 34%, transparent); } :root[data-theme="light"] .tag-sector { color: var(--tag-sector); background: color-mix(in srgb, var(--tag-sector) 10%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-sector) 34%, transparent); } :root[data-theme="light"] :is(.tag-history, .tag-resist) { color: var(--tag-warm); background: color-mix(in srgb, var(--tag-warm) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-warm) 36%, transparent); } :root[data-theme="sand"] :is(.tag-rsi-hot, .tag-down, .tag-fund-pos) { color: var(--tag-hot); background: color-mix(in srgb, var(--tag-hot) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-hot) 38%, transparent); } :root[data-theme="sand"] .tag-rsi-cool { color: var(--tag-cool); background: color-mix(in srgb, var(--tag-cool) 10%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-cool) 36%, transparent); } :root[data-theme="sand"] :is(.tag-up, .tag-fund-neg) { color: var(--tag-positive); background: color-mix(in srgb, var(--tag-positive) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-positive) 36%, transparent); } :root[data-theme="sand"] .tag-atr { color: var(--tag-accent); background: color-mix(in srgb, var(--tag-accent) 10%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-accent) 34%, transparent); } :root[data-theme="sand"] .tag-sector { color: var(--tag-sector); background: color-mix(in srgb, var(--tag-sector) 10%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-sector) 34%, transparent); } :root[data-theme="sand"] :is(.tag-history, .tag-resist) { color: var(--tag-warm); background: color-mix(in srgb, var(--tag-warm) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--tag-warm) 36%, transparent); } /* Toggle 开关 */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: rgba(125,145,210,.18); border-radius: 24px; transition: .3s; } .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--muted); border-radius: 50%; transition: .3s; } .switch input:checked + .slider { background: var(--cyan); } .switch input:checked + .slider::before { transform: translateX(20px); background: #06121a; } .strategy-control { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; } .strategy-control .switch { flex-shrink: 0; } /* 策略卡片头部拆成标题行和操作行，窄卡片不会挤压标题或溢出按钮。 */ .card-header.strategy-card-header { flex-direction: column; align-items: stretch; gap: 10px; } .strategy-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .strategy-card-title h3 { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .strategy-card-title .strategy-control { margin-left: auto; flex-shrink: 0; } .strategy-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; } .strategy-actions .pill-btn { flex-shrink: 0; } /* ====== 策略卡片：紧凑布局 + 精致视觉 ====== */ .strategy-card { padding: 14px 16px 15px; } .card-header.strategy-card-header { gap: 8px; margin-bottom: 10px; } .strategy-card-title { gap: 8px; } .strategy-card-title h3 { font-size: 14px; font-weight: 600; letter-spacing: .01em; } .strategy-actions { gap: 6px; } .strategy-card-details { display: grid; gap: 8px; margin: 0 0 10px; min-width: 0; } /* 元信息行：精炼的元数据条 */ .strategy-card-info-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 11px; color: var(--muted); } .strategy-card-info-line .info-item { display: inline-flex; align-items: baseline; gap: 5px; } .strategy-card-info-line .info-item .k { color: var(--dim); font-size: 10px; font-weight: 500; } .strategy-card-info-line .info-item b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .strategy-card-info-line .info-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); } /* 核心指标 4 列 tile */ .strategy-card-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .strategy-card-metrics .metric { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 7px 9px; background: var(--surface2); border: 1px solid var(--border); border-left: 2px solid var(--border-strong); border-radius: var(--radius-control); transition: transform .12s ease, border-color .12s ease, background .12s ease; } .strategy-card-metrics .metric:hover { transform: translateY(-1px); border-color: var(--border-strong); background: color-mix(in srgb, var(--surface2) 82%, var(--bg) 18%); } .strategy-card-metrics .metric.metric-long { border-left-color: var(--green); } .strategy-card-metrics .metric.metric-short { border-left-color: var(--red); } .strategy-card-metrics .metric.metric-pnl { border-left-color: var(--cyan); } .strategy-card-metrics .metric.metric-margin{ border-left-color: var(--purple); } .strategy-card-metrics .metric-label { font-size: 10px; color: var(--dim); font-weight: 600; letter-spacing: .03em; line-height: 1.2; } .strategy-card-metrics .metric-value { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; } .strategy-card-metrics .metric-value small { font-size: 10px; color: var(--dim); font-weight: 500; margin-left: 2px; } .strategy-card-metrics .metric.metric-long .metric-value small, .strategy-card-metrics .metric.metric-short .metric-value small { display: block; margin: 2px 0 0; line-height: 1.2; } /* 底部：结算 KPI（主视觉）+ 走势图 */ .strategy-card-bottom { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr); gap: 8px; align-items: stretch; min-height: 66px; } .strategy-card-bottom .metric.metric-settle { border-left-color: var(--amber); padding: 10px; justify-content: center; gap: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 12%, transparent), transparent 65%), var(--surface2); } .strategy-card-bottom .metric-settle .metric-label { font-size: 10px; color: color-mix(in srgb, var(--amber) 72%, var(--dim)); letter-spacing: .04em; } .strategy-card-bottom .metric-settle .metric-value { font-size: 18px; } .strategy-card-chart { box-sizing: border-box; cursor: pointer; position: relative; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 6px 8px; min-height: 66px; height: 100%; transition: border-color .12s ease, background .12s ease; } .strategy-card-chart:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface2) 85%, var(--bg) 15%); } .strategy-card-chart-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; color: var(--dim); font-size: 10px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; } .strategy-card-chart-label span:last-child { color: var(--muted); font-size: 9px; font-weight: 500; } .strategy-card-chart-body { width: 100%; height: calc(100% - 16px); min-height: 38px; } .strategy-card-chart-placeholder { min-height: 50px; } .strategy-card .position-card-controls { gap: 6px; margin: -2px 0 6px; } .strategy-card .position-table { font-size: 11px !important; } .strategy-card .position-table th { padding: 6px 8px; font-size: 10px; letter-spacing: 0; text-transform: none; } .strategy-card .position-table td { padding: 7px 8px; } /* 营销推文卡片 */ .mk-post-card { padding: 16px 0; border-bottom: 1px solid var(--border); } .mk-post-card:last-child { border-bottom: none; } .mk-post-body { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 8px 0; line-height: 1.6; font-size: 13px; white-space: pre-wrap; word-break: break-word; } .mk-post-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--dim); margin-top: 6px; align-items: center; } .mk-tag { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; } .mk-tag.sharp { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--surface2)); } .mk-tag.deep { color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, var(--surface2)); } .mk-tag.question { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface2)); } .mk-tag.published { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface2)); } .mk-tag.failed { color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface2)); } .mk-tag.draft { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--surface2)); } .mk-tag.report { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface2)); } .mk-tag.analysis { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface2)); } .mk-tag.manual { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--surface2)); } .channel-icon { width: 16px; height: 16px; display: block; flex: 0 0 16px; object-fit: contain; } .sum-card .label .channel-icon { display: inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; } .mk-channel-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 3px; margin-left: 6px; border-radius: 7px; transition: transform .15s, background .15s, border-color .15s; } .mk-channel-link:hover { transform: translateY(-1px); background: var(--surface2); } /* 营销预览区 */ .mk-preview-card { border-color: rgba(52,231,208,.34); box-shadow: 0 0 0 1px rgba(52,231,208,.12), 0 8px 30px rgba(0,0,0,.25); } .mk-preview-card .card-header h3 { color: var(--cyan); } #mk-preview .mk-loading { display: flex; align-items: center; gap: 12px; padding: 18px 4px; color: var(--muted); font-size: 13px; } #mk-preview .mk-loading .spinner { width: 22px; height: 22px; border-width: 2px; } #mk-preview .mk-error { color: var(--red); font-size: 13px; padding: 14px 4px; } /* 营销信息卡片 */ .mk-info-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .mk-info-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px; overflow: hidden; } .mk-info-card h4 { font-size: 13px; color: var(--cyan); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .mk-info-card .mk-card-item { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.5; color: var(--text); } .mk-info-card .mk-card-item:last-child { border-bottom: none; } .mk-info-card .mk-card-item .mk-card-brief { color: var(--dim); font-size: 11px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-info-card .mk-card-item .mk-card-empty { color: var(--dim); font-size: 12px; font-style: italic; padding: 6px 0; } @media (max-width: 1240px) { .mk-info-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .mk-info-cards { grid-template-columns: 1fr; } } /* 手动输入内容（空预览编辑区） */ .mk-manual-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 140px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; margin: 8px 0; line-height: 1.6; font-size: 13px; font-family: inherit; outline: none; transition: .2s; } .mk-manual-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(52,231,208,.25); } .mk-manual-input::placeholder { color: var(--dim); } #mk-preview .mk-err-hint { color: var(--dim); font-size: 12px; margin-top: 6px; line-height: 1.5; } .mk-fade-in { animation: mkFadeIn .35s ease; } @keyframes mkFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* 持仓盈亏模块二级带单 Tab 切换栏 */ .sub-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .position-tab-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .position-tab-toolbar .sub-tabs { flex: 1; margin-bottom: 0; } .position-tab-add { margin-left: auto; white-space: nowrap; } .sub-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface2); border: 1px solid var(--border); transition: .2s; white-space: nowrap; } .sub-tab .ico { font-size: 14px; } .sub-tab:hover { color: var(--text); border-color: rgba(52,231,208,.3); } .sub-tab.active { color: var(--text); background: color-mix(in srgb, var(--cyan) 14%, var(--surface2)); border-color: var(--border-strong); box-shadow: 0 0 14px rgba(52,231,208,.18); } /* 持仓 Tab 切换 loading 遮罩 */ .pos-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 0; } .pos-loading .spinner { width: 32px; height: 32px; } .sub-tab.active .ico { filter: drop-shadow(0 0 6px var(--cyan)); } /* 通知流：主 tag 下的策略子 tag（比主 tag 更小） */ .sub-sub-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; padding-left: 2px; } .sub-sub-tab { display: inline-flex; align-items: center; padding: 4px 13px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface2); border: 1px solid var(--border); transition: .2s; white-space: nowrap; } .sub-sub-tab:hover { color: var(--text); border-color: rgba(52,231,208,.28); } .sub-sub-tab.active { color: var(--text); background: color-mix(in srgb, var(--cyan) 12%, var(--surface2)); border-color: var(--border-strong); box-shadow: 0 0 10px rgba(52,231,208,.12); } /* ---- 通知流过滤栏 ---- */ .notify-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); } .notify-type-chips { display: flex; gap: 8px; flex-wrap: wrap; } .notify-type-chips .chip { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); transition: all .18s ease; white-space: nowrap; } .notify-type-chips .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; opacity: .55; } .notify-type-chips .chip:hover { color: var(--text); border-color: rgba(52,231,208,.4); transform: translateY(-1px); } .notify-type-chips .chip.active { color: #fff; border-color: transparent; font-weight: 700; } .notify-type-chips .chip[data-types=""]:not(.active)::before { background: var(--muted); } .notify-type-chips .chip[data-types="open"]::before { background: var(--cyan); } .notify-type-chips .chip[data-types="close"]::before { background: var(--green); } .notify-type-chips .chip[data-types="dca"]::before { background: var(--purple); } .notify-type-chips .chip[data-types="reduce"]::before { background: var(--amber); } /* 激活态：填充对应类型的颜色 */ .notify-type-chips .chip[data-types=""].active { background: var(--cyan); color: var(--on-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--cyan) 35%, transparent); } .notify-type-chips .chip[data-types="open"].active { background: var(--cyan); color: var(--on-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--cyan) 35%, transparent); } .notify-type-chips .chip[data-types="close"].active { background: var(--green); color: var(--on-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--green) 35%, transparent); } .notify-type-chips .chip[data-types="dca"].active { background: var(--purple); color: var(--on-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--purple) 35%, transparent); } .notify-type-chips .chip[data-types="reduce"].active { background: var(--amber); color: var(--on-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--amber) 35%, transparent); } .notify-search { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; border-radius: 9px; background: var(--input-bg); border: 1px solid var(--border-strong); transition: border-color .18s, box-shadow .18s; min-height: 32px; } .notify-search:focus-within { border-color: rgba(52,231,208,.55); box-shadow: 0 0 0 3px rgba(52,231,208,.12); } .notify-search .ns-ico { font-size: 12px; opacity: .5; flex: 0 0 auto; } .notify-search input { width: 140px; padding: 4px 0; border: none; outline: none; font-size: 12px; background: transparent; color: var(--text); min-width: 0; } .notify-search input::placeholder { color: var(--dim); } .notify-search .ns-clear { cursor: pointer; opacity: .5; font-size: 16px; line-height: 1; padding: 0 2px; color: var(--muted); display: none; flex: 0 0 auto; } .notify-search.has-text .ns-clear { display: block; } .notify-search .ns-clear:hover { opacity: 1; color: var(--red); } /* 带单曲线卡片：在币安查看外链按钮 */ .roi-link-btn { margin-left: auto; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--cyan); border: 1px solid rgba(52,231,208,.32); padding: 4px 12px; border-radius: 999px; transition: .2s; white-space: nowrap; } .roi-link-btn:hover { background: rgba(52,231,208,.12); box-shadow: 0 0 12px rgba(52,231,208,.2); } /* ---- 移动端最终覆盖：统一处理内联网格、横向内容和触控尺寸 ---- */ @media (max-width: 820px) { .topnav { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; gap: 8px 10px; } .brand { min-width: 0; } .nav-toggle { min-width: 40px; min-height: 40px; } .nav { width: 100%; } .nav-item { min-height: 42px; } .content { width: 100%; padding: 14px 10px 36px; } .summary-grid, #overview-summary, #overview-cats.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .follower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .follower-cell { padding: 0 10px; } .follower-cell:nth-child(odd) { padding-left: 0; border-left: none; } .follower-cell:nth-child(even) { padding-right: 0; } .follower-cell:nth-child(n+3) { padding-top: 10px; border-top: 1px solid var(--border); } .sum-card { min-width: 0; } .sum-card .value { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } #overview-summary .sum-card .value { font-size: 20px !important; } #ov-leverage-ratio { white-space: nowrap !important; line-height: 1.35; overflow-wrap: normal; } /* 公域/私域/信号 tab 下的多空杠杆比例卡片 */ #positions-summary #pos-leverage-ratio { font-size: 13px !important; white-space: nowrap !important; } #positions-summary #pos-long-short-pnl { font-size: 11px !important; white-space: nowrap !important; } /* 持仓多空盈亏保持单行显示：高特异性覆盖 #overview-summary .sum-card .value 的 20/18px，缩小字号 + 禁止换行 */ #overview-summary #ov-long-short-pnl { font-size: 11px !important; white-space: nowrap !important; } /* 金额过长时允许 .sum-card 内多值金额换行，避免 nowrap 撑出/截断卡片 */ .sum-card .value .ov-multival, #ov-long-short-pnl, #ov-leverage-ratio { overflow-wrap: anywhere; word-break: break-word; } .card-header { align-items: flex-start; } .card-header h3 { flex: 1 1 180px; line-height: 1.4; } .card-header > span { margin-left: auto; } .table-card { overflow: hidden; } .strategy-card { overflow: hidden; } @media (max-width: 480px) { .strategy-card { padding: 11px; } .strategy-card-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .strategy-card-bottom { grid-template-columns: 1fr; min-height: 0; } .strategy-card-info-line { padding: 5px 8px; gap: 3px 8px; } } .table-scroll { margin: 0 -2px; } .table-scroll > table { min-width: 500px; } .pos-meta { flex-wrap: wrap; } .pos-meta .stat { flex: 1 1 130px; justify-content: space-between; white-space: normal; } .pos-meta .stat b { overflow-wrap: anywhere; word-break: break-word; } .strategy-actions { justify-content: flex-start; } .strategy-actions .pill-btn { min-height: 36px; } .filter-bar .mini-input { min-width: 0; flex: 1 1 180px; } .sub-tabs, .sub-sub-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .sub-tab, .sub-sub-tab { flex: 0 0 auto; min-height: 38px; } .sub-sub-tab { min-height: 32px; } #lead-margin, #lead-pnl, #lead-metrics, #lead-copy-scale { align-items: flex-start !important; } #lead-margin > span, #lead-pnl > span, #lead-metrics > span, #lead-copy-scale > span { flex: 1 1 140px; min-width: 0; } .roi-link-btn { margin-left: 0; } #roi-updated { margin-left: 0 !important; } .mk-config-grid { align-items: start; gap: 10px; grid-template-columns: minmax(0, 1fr); } .mk-config-schedule-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .mk-config-schedule-preview { grid-column: 1 / -1; } .mk-config-schedule-desc { white-space: normal; } .mk-auto-post-copy small { white-space: normal; } .mk-config-field { min-height: 40px; } .mk-config-actions { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 0 2px; } .mk-config-action { min-width: 0; } .mk-config-action, .mk-config-action:first-child, .mk-config-action:last-child { padding: 0; border-left: 0; } .mk-config-action:nth-child(n+3) { padding-top: 10px; border-top: 1px solid var(--border); } .mk-config-action-controls > .pill-btn, .mk-config-action-controls > .mk-video-manager-action { display: flex; min-width: 0; } .mk-config-action-controls .pill-btn { min-height: 42px; padding: 8px 10px; white-space: normal; line-height: 1.35; } .mk-x-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .mk-x-row .mk-x-label { border-right: none; border-bottom: 1px dashed var(--border); padding-right: 0; padding-bottom: 10px; min-height: 32px; } .mk-x-row .mk-x-actions { justify-content: flex-start; flex-wrap: wrap; } .mk-x-row .mk-x-main { justify-content: flex-start; } .mk-x-row .pill-btn { min-height: 40px; } .mk-channel-header { padding: 8px 12px; } .mk-channel-content { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 10px; padding: 0 12px 12px; } .mk-channel-content .mk-x-actions { justify-content: flex-start; } .mk-help { line-height: 1.6; } /* --- 移动端概览卡片：值不省略、禁止溢出隐藏 --- */ #overview-summary .sum-card, #overview-cats .sum-card { overflow: visible; min-height: 0; } #overview-summary .sum-card .value, #overview-cats .sum-card .value { text-overflow: clip; overflow: visible; } /* --- 营销 ov-flex（浏览/点赞/转发/评论/收藏）移动端紧凑 --- */ .ov-flex { gap: 10px 14px; } .ov-item { gap: 4px; } .ov-k { font-size: 11px; } .ov-v { font-size: 15px; } /* --- 币安广场数据网格：小屏与粉丝数量卡片统一为两列 --- */ .engage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .engage-cell { padding: 0 10px; } .engage-cell:nth-child(odd) { padding-left: 0; border-left: none; } .engage-cell:nth-child(even) { padding-right: 0; } .engage-cell:nth-child(n+3) { padding-top: 10px; border-top: 1px solid var(--border); } .engage-label { font-size: 11px; } .engage-value { font-size: 18px; } /* --- 推文数据流顶部标签栏：允许换行，避免错位 --- */ .mk-post-card > div:first-child { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; row-gap: 6px; margin-bottom: 6px !important; } .mk-post-card > div:first-child > * { flex: 0 0 auto; } .mk-tag { white-space: nowrap; } /* --- 营销信息 4 卡：移动单列 + 更紧凑 --- */ #marketing-summary { display: grid; grid-template-columns: 1fr; gap: 10px !important; } #marketing-summary .sum-card { padding: 10px 12px; } #marketing-summary .sum-card .label { letter-spacing: .5px; } #marketing-summary .sum-card .value { font-size: 18px !important; margin-top: 2px !important; } /* --- 设置弹窗 / 切换账号 移动端样式优化 --- */ /* 从桌面居中模态改为从底部弹出样式，适配手机触屏 */ #settings-overlay { padding: 0 !important; align-items: flex-end !important; } #settings-overlay .modal-box { width: 100% !important; max-width: 100% !important; max-height: 92dvh !important; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important; border-radius: 18px 18px 0 0 !important; border: 1px solid var(--border-strong); box-shadow: 0 -20px 60px rgba(0,0,0,.6); } #settings-overlay .modal-header { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); position: relative; min-height: 32px; } /* 顶部指示条，增强移动端底部抽屉观感 */ #settings-overlay .modal-header::before { content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%); width: 42px; height: 4px; border-radius: 2px; background: rgba(154,166,192,.35); } #settings-overlay .close-btn { font-size: 24px !important; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } .settings-tabs { gap: 4px; padding: 3px; border-radius: 10px; margin-bottom: 10px; } .settings-tab { font-size: 12px; padding: 7px 6px; border-radius: 8px; } .syscfg-subtabs { gap: 4px; padding: 3px; border-radius: 10px; margin-bottom: 10px; } .syscfg-subtab { font-size: 12px; padding: 6px 10px; border-radius: 8px; } /* 账号卡片在手机上改为竖向：名称+徽章上方，操作按钮下方全宽铺开，3列适合切换/编辑/删除 */ .account-item { flex-direction: column; align-items: stretch; padding: 14px 12px; gap: 12px; margin-bottom: 10px; } .account-item-main { justify-content: space-between; } .account-item-name { font-size: 15px; } .account-item-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; } .account-item-actions .pill-btn, .account-item-actions .btn-danger-sm { width: 100%; min-height: 36px; font-size: 12px; padding-left: 6px; padding-right: 6px; } /* 新增账号按钮 */ .btn-add-account { width: 100%; min-height: 40px; margin-bottom: 12px !important; justify-content: center; display: inline-flex; align-items: center; } /* 账号表单底部两个按钮：全宽两列 */ .account-form-actions { display: grid !important; grid-template-columns: 1fr 1fr; justify-content: stretch !important; } .account-form-actions .pill-btn { width: 100%; min-height: 40px; justify-content: center; display: inline-flex; align-items: center; } /* 系统配置：LLM参数 3列改2列 */ .llm-params { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 表单提交按钮全宽单列（保存/恢复），避免挤在右边 */ .syscfg-row { display: grid !important; grid-template-columns: 1fr; gap: 8px; } .syscfg-row .pill-btn { width: 100%; min-height: 40px; justify-content: center; display: inline-flex; align-items: center; } } @media (max-width: 480px) { .topnav { padding-left: 8px; padding-right: 8px; } .topnav-right { gap: 6px; } .content { padding: 10px 8px 32px; } .summary-grid, #overview-summary, #overview-cats.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .follower-grid-card { grid-column: span 1; } .sum-card { padding: 11px 12px; } .sum-card .label { letter-spacing: .5px; } .sum-card .value { font-size: 18px; } #overview-summary .sum-card .value { font-size: 18px !important; } #overview-summary #ov-leverage-ratio { white-space: nowrap !important; } #positions-summary #pos-leverage-ratio { font-size: 12px !important; white-space: nowrap !important; } #positions-summary #pos-long-short-pnl { font-size: 11px !important; white-space: nowrap !important; } #ov-long-short-pnl { font-size: 12px !important; } .card { padding: 12px; } .card-header { margin-bottom: 10px; } .card-header > span { width: 100%; margin-left: 0; } .table-scroll > table { min-width: 470px; } .mk-config-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "schedules" "actions"; align-items: start; } .mk-config-schedule-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .mk-config-schedule-preview { grid-column: 1 / -1; } .mk-config-actions { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 0 0; } .mk-config-action, .mk-config-action:first-child, .mk-config-action:last-child { padding: 0 0 10px; border-left: 0; border-bottom: 1px solid var(--border); } .mk-config-action:last-child { padding-bottom: 0; border-bottom: 0; } .mk-config-action-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-config-action-controls > .pill-btn, .mk-config-action-controls > .mk-video-manager-action { min-width: 0; } .mk-config-action-controls > :only-child { grid-column: 1 / -1; } .mk-config-action-controls .pill-btn { min-height: 42px; padding: 8px 10px; white-space: normal; line-height: 1.35; } .mk-config-field { width: 100%; justify-content: space-between; } #mk-interval { width: 96px !important; } .mk-x-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .mk-x-row .mk-x-label { border-right: none; border-bottom: 1px dashed var(--border); padding-right: 0; padding-bottom: 10px; min-height: 32px; width: 100%; } .mk-x-row .mk-x-actions { justify-content: flex-start; flex-wrap: wrap; } .mk-x-row .mk-x-main { justify-content: flex-start; } .mk-x-row .pill-btn { min-height: 40px; } .modal-overlay { padding: 10px; } .modal-box { width: min(750px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 14px; } .copy-confirm-overlay { padding: 0; align-items: flex-end; } .copy-confirm-dialog { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; border-bottom: 0; } .copy-confirm-head { padding: 16px 16px 12px; } .copy-confirm-body { padding: 14px 16px 16px; } .copy-confirm-actions { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); } #ph-modal-chart, #ov-roi-modal-chart { height: min(380px, 52vh) !important; } /* 超小屏保持两列，奇数位为行首 */ .engage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .engage-value { font-size: 17px; } } /* 总览多空杠杆比例按卡片实际内容宽度自适应，始终保持单行。 */ #overview-summary .sum-card, #gov-pos-summary .overview-leverage-card { container-type: inline-size; } #overview-summary #ov-leverage-ratio, #overview-summary #ov-long-short-pnl, #gov-pos-summary .overview-leverage-value { /* cqw keeps the complete long/short value on one line as the card shrinks. */ font-size: clamp(10px, 4.5cqw, 14px) !important; line-height: 1.3; } #overview-summary #ov-leverage-ratio, #gov-pos-summary .overview-leverage-value, #positions-summary #pos-leverage-ratio { /* 杠杆数值比卡片标题和说明更紧凑，避免多空值挤压总览布局。 */ font-size: clamp(13px, min(9cqw, 16px), 16px) !important; } #overview-summary #ov-long-short-pnl, #gov-pos-summary .overview-pnl-value, #positions-summary #pos-long-short-pnl { /* 盈亏金额量级决定字号，卡片宽度只负责窄屏下的进一步收缩。 */ font-size: clamp(10px, min(4.5cqw, var(--pnl-font-size, 14px)), 14px) !important; }