/* ========================================================================== AI 助手 · 统一样式（前台 + 后台） · 颜色全部走 CSS 变量，主题色由 theme.js 注入（--primary / --primary-dark / --primary-soft / --primary-line / --primary-glow） · 支持深色（默认）与浅色两套模式，靠 切换 · 图标统一用内联 SVG（icons.js），尺寸随字号，颜色跟随 currentColor ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* 深色（默认） */ --bg: #0a0c12; --bg2: #0f1219; --panel: #141821; --panel2: #1a1f2a; --panel3: #222836; --border: #252c3a; --border-strong: #364051; --text: #e9ecf3; --dim: #98a2b6; --mute: #6b7488; --primary: #4f7cff; --primary-dark: #3f6ae8; --primary-soft: rgba(79, 124, 255, .16); --primary-line: rgba(79, 124, 255, .42); --primary-glow: rgba(79, 124, 255, .30); --ok: #2ea043; --ok-fg: #6ee7a0; --warn: #d29922; --warn-fg: #e3c078; --danger: #e5534b; --danger-fg: #ff8f88; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 44px -18px rgba(0, 0, 0, .75); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --scroll: #2c3444; --scroll-hover: #3a4457; } /* ---------------------------------------------------------------- 浅色模式 */ html[data-mode="light"] { --bg: #f4f6fb; --bg2: #ffffff; --panel: #ffffff; --panel2: #f7f9fc; --panel3: #eef2f8; --border: #e4e9f1; --border-strong: #cbd4e1; --text: #17202f; --dim: #59637a; --mute: #8b94a8; --ok-fg: #1a7f37; --warn-fg: #9a6700; --danger-fg: #c0392b; --shadow: 0 1px 2px rgba(16, 24, 40, .06); --shadow-lg: 0 18px 44px -20px rgba(16, 24, 40, .28); --scroll: #c9d2e0; --scroll-hover: #aeb9cb; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .2s, color .2s; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } [hidden] { display: none !important; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); } ::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------------------------ 图标 */ .ico { flex: none; display: inline-block; vertical-align: -.16em; } /* ------------------------------------------------------------------ 控件 */ button { font-family: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel2); color: var(--text); cursor: pointer; transition: .15s; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } button:hover:not(:disabled) { background: var(--panel3); border-color: var(--primary-line); } button:disabled { opacity: .45; cursor: not-allowed; } button.primary { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-color: var(--primary); color: #fff; font-weight: 500; box-shadow: 0 6px 18px -8px var(--primary-glow); } button.primary:hover:not(:disabled) { filter: brightness(1.07); border-color: var(--primary); } button.danger { color: var(--danger-fg); border-color: var(--danger); background: transparent; } button.danger:hover:not(:disabled) { background: rgba(229, 83, 75, .12); } button.ok { color: var(--ok-fg); border-color: var(--ok); background: transparent; } button.ok:hover:not(:disabled) { background: rgba(46, 160, 67, .12); } button.sm { padding: 5px 10px; font-size: 12.5px; } button.ghost { background: transparent; border-color: var(--border); } input, select, textarea { font-family: inherit; font-size: 13.5px; width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg2); color: var(--text); outline: none; transition: .15s; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } input::placeholder, textarea::placeholder { color: var(--mute); } textarea { resize: vertical; line-height: 1.6; } label { display: block; font-size: 12.5px; font-weight: 500; color: var(--dim); margin-bottom: 5px; } code { font-family: var(--mono); font-size: 12.5px; background: var(--panel3); padding: 1px 6px; border-radius: 5px; } .muted { color: var(--dim); } .mute2 { color: var(--mute); } .mono { font-family: var(--mono); } .field { margin-bottom: 14px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .msg { font-size: 12.5px; min-height: 18px; color: var(--dim); } .msg.err { color: var(--danger-fg); } .msg.ok { color: var(--ok-fg); } /* -------------------------------------------------------- 主题选择器 */ .themebar { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; } .themebar-group { display: flex; align-items: center; gap: 10px; } .themebar-label { font-size: 12.5px; color: var(--dim); white-space: nowrap; } .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--sw); border: 2px solid transparent; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .swatch:hover { transform: scale(1.1); } .swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sw); } .seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; } .seg-btn { border: none; background: transparent; color: var(--dim); padding: 5px 13px; border-radius: 999px; font-size: 12.5px; box-shadow: none; } .seg-btn:hover:not(:disabled) { background: transparent; color: var(--text); } .seg-btn.on { background: var(--primary); color: #fff; } /* ------------------------------------------------------------ 登录/注册 */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 480px at 50% -12%, var(--primary-glow), transparent 72%), radial-gradient(700px 380px at 110% 110%, var(--primary-soft), transparent 70%), var(--bg); } .auth-card { width: 100%; max-width: 404px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 32px 28px 24px; } .auth-logo { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 12px 28px -12px var(--primary-glow); } .auth-card h1 { margin: 0 0 4px; font-size: 20px; text-align: center; font-weight: 650; } .auth-card .sub { margin: 0 0 22px; text-align: center; font-size: 12.5px; color: var(--dim); } .auth-tabs { display: flex; gap: 4px; background: var(--bg2); padding: 4px; border-radius: 11px; margin-bottom: 20px; } .auth-tabs button { flex: 1; border: none; background: transparent; padding: 7px; border-radius: 8px; font-size: 13.5px; color: var(--dim); font-weight: 500; box-shadow: none; } .auth-tabs button:hover:not(:disabled) { background: transparent; color: var(--text); } .auth-tabs button.on { background: var(--panel3); color: var(--text); box-shadow: var(--shadow); } .notice-box { margin-bottom: 16px; padding: 10px 13px; border-radius: var(--radius-sm); background: rgba(210, 153, 34, .1); border: 1px solid rgba(210, 153, 34, .3); color: var(--warn-fg); font-size: 12.5px; line-height: 1.6; } .code-row { display: flex; gap: 8px; } .code-row input { flex: 1; } .code-row button { flex-shrink: 0; } .auth-foot { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--mute); } .site-meta { margin-top: 14px; text-align: center; font-size: 12px; color: var(--mute); line-height: 1.8; } .site-meta a { color: var(--mute); } .site-meta a:hover { color: var(--primary); } /* 顶部横幅（远程图片）与本站公告 */ .site-banner { width: 100%; max-width: 404px; margin-bottom: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); } .site-banner img { display: block; width: 100%; height: auto; } .site-banner-wide { max-width: 100%; margin: 0 auto 18px; } /* 进入聊天页之后的宣传图：占满内容宽、贴顶显示，窄屏自动收边 */ .site-banner-app { max-width: 100%; margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; flex: none; } .site-banner-app + .chat { padding-top: 10px; } /* 协议勾选 */ .agree-row { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 16px; font-size: 12.5px; color: var(--dim); line-height: 1.6; } .agree-row input { width: 15px; height: 15px; margin: 2px 0 0; flex: none; accent-color: var(--primary); } .agree-row a { cursor: pointer; } /* ------------------------------------------------------------ 用户端 */ .layout { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 264px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .sidebar .top { padding: 14px; border-bottom: 1px solid var(--border); } .sidebar .user { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .sidebar .user span { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convs { flex: 1; overflow-y: auto; padding: 8px; } .conv-item { padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; transition: .12s; } .conv-item:hover { background: var(--panel2); } .conv-item.on { background: var(--primary-soft); color: var(--primary); font-weight: 500; } .conv-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .conv-item .del { opacity: 0; font-size: 15px; color: var(--mute); padding: 0 3px; } .conv-item:hover .del { opacity: 1; } .conv-item .del:hover { color: var(--danger); } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--border); } .head .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .head select { width: auto; min-width: 130px; padding: 6px 10px; font-size: 13px; } .chat { flex: 1; overflow-y: auto; padding: 22px 18px; } .chat .empty { text-align: center; color: var(--mute); margin-top: 20vh; font-size: 14px; } .bubble { max-width: 780px; margin: 0 auto 14px; padding: 11px 15px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.75; } .bubble.user { background: var(--primary); color: #fff; margin-left: auto; max-width: 620px; } .bubble.assistant { background: var(--panel); border: 1px solid var(--border); } .bubble.system { background: rgba(210, 153, 34, .1); border: 1px solid rgba(210, 153, 34, .3); color: var(--warn-fg); font-size: 13px; } .composer { display: flex; gap: 10px; padding: 14px 18px; background: var(--panel); border-top: 1px solid var(--border); align-items: flex-end; } .composer textarea { min-height: 44px; max-height: 180px; } .composer button { height: 44px; padding: 0 20px; } /* 模型选择条：紧贴输入框上方，窄屏也放得下 */ .model-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 9px 18px 0; background: var(--panel); } .model-bar .mb-label { font-size: 12.5px; color: var(--mute); flex: none; } .model-bar select { flex: 1; min-width: 130px; max-width: 320px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font: inherit; font-size: 13px; } .model-bar select:focus { outline: none; border-color: var(--primary-line); } .model-bar select option:disabled { color: var(--mute); } .model-bar .mb-hint { font-size: 11.5px; color: var(--mute); flex: 1; min-width: 0; } /* 头像 */ .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 1px solid var(--border); overflow: hidden; } .avatar.lg { width: 76px; height: 76px; font-size: 30px; } .drawer { position: fixed; inset: 0 0 0 auto; width: 480px; max-width: 94vw; background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; z-index: 60; } .drawer.open { transform: none; } .drawer .head { display: flex; align-items: center; justify-content: space-between; } .files { flex: 1; overflow-y: auto; padding: 10px; border-bottom: 1px solid var(--border); } .file-item { padding: 8px 11px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; } .file-item:hover { background: var(--panel2); } .file-item .sz { margin-left: auto; font-size: 11.5px; color: var(--mute); } .file-edit { padding: 14px; } .file-edit textarea { min-height: 150px; margin: 8px 0; font-family: var(--mono); font-size: 12.5px; } /* ------------------------------------------------------------ 后台 */ .admin { display: flex; min-height: 100vh; } .admin-side { width: 224px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .admin-brand { padding: 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 11px; } .admin-brand .mark { width: 36px; height: 36px; flex: none; border-radius: 11px; color: #fff; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 8px 20px -10px var(--primary-glow); } .admin-brand .txt { min-width: 0; } .admin-brand b { display: block; font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-brand span { font-size: 11.5px; color: var(--mute); } .admin-nav { flex: 1; padding: 10px 8px; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--dim); cursor: pointer; margin-bottom: 2px; transition: .15s; } .nav-item:hover { background: var(--panel2); color: var(--text); } .nav-item.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .nav-item .ic { display: inline-flex; align-items: center; } .admin-side-foot { padding: 12px; border-top: 1px solid var(--border); } .admin-side-foot button { width: 100%; margin-bottom: 6px; } .admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .admin-head h1 { margin: 0; font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 9px; } .admin-head .who { font-size: 12.5px; color: var(--dim); } .admin-body { padding: 20px 24px 48px; flex: 1; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary), transparent); } .stat .k { font-size: 12.5px; color: var(--dim); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .stat .v { font-size: 24px; font-weight: 700; letter-spacing: -.5px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; } .card > h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 9px; } .card > h2 .ico { color: var(--primary); } .card > .desc { margin: 0 0 18px; font-size: 12.5px; color: var(--dim); line-height: 1.6; } .card-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 900px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); } .switch-row:last-child { border-bottom: none; } .switch-row .txt { flex: 1; min-width: 0; } .switch-row .txt b { display: block; font-size: 13.5px; font-weight: 550; } .switch-row .txt span { font-size: 12px; color: var(--dim); } .sw { position: relative; width: 42px; height: 24px; flex-shrink: 0; } .sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .sw i { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: .18s; pointer-events: none; } .sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: .18s; } .sw input:checked + i { background: var(--ok); } .sw input:checked + i::after { transform: translateX(18px); } .tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; padding: 10px 14px; background: var(--panel2); color: var(--dim); font-weight: 600; font-size: 12.5px; white-space: nowrap; border-bottom: 1px solid var(--border); } tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--panel2); } .tbl-empty { padding: 40px 20px; text-align: center; color: var(--mute); } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--panel3); color: var(--dim); white-space: nowrap; } .tag.ok { background: rgba(46, 160, 67, .16); color: var(--ok-fg); } .tag.warn { background: rgba(210, 153, 34, .16); color: var(--warn-fg); } .tag.off { background: var(--panel3); color: var(--mute); } .tag.blue { background: var(--primary-soft); color: var(--primary); } .tag.red { background: rgba(229, 83, 75, .16); color: var(--danger-fg); } .key-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; background: var(--panel2); } .key-card.on { border-color: var(--primary-line); } .key-card .kh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .key-card .kh b { font-size: 14.5px; } .key-card .fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 900px) { .key-card .fields { grid-template-columns: 1fr; } } .key-card .keyfull { font-family: var(--mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; word-break: break-all; color: var(--dim); } .key-card .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .key-card .acts .sp { flex: 1; } .conv-layout { display: grid; grid-template-columns: 330px 1fr; gap: 16px; } @media (max-width: 900px) { .conv-layout { grid-template-columns: 1fr; } } .conv-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); max-height: 68vh; overflow-y: auto; } .conv-row { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .12s; } .conv-row:hover { background: var(--panel2); } .conv-row.on { background: var(--primary-soft); } .conv-row b { font-size: 13px; } .conv-row .t { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-row .d { font-size: 11.5px; color: var(--mute); } .conv-view { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 16px; max-height: 68vh; overflow-y: auto; } .conv-view .bubble { max-width: 100%; margin-bottom: 12px; font-size: 13px; } .toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { padding: 10px 18px; border-radius: 10px; background: var(--panel3); border: 1px solid var(--border-strong); color: var(--text); font-size: 13px; box-shadow: var(--shadow-lg); animation: tin .22s; } .toast.ok { border-color: rgba(46, 160, 67, .5); color: var(--ok-fg); } .toast.err { border-color: rgba(229, 83, 75, .5); color: var(--danger-fg); } @keyframes tin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; } } .menu-btn { display: none; } .mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 70; } @media (max-width: 820px) { .admin-side { position: fixed; left: 0; top: 0; z-index: 80; transform: translateX(-100%); transition: .22s; } .admin-side.open { transform: none; } .menu-btn { display: inline-flex; } .admin-body { padding: 14px; } .sidebar { position: fixed; left: 0; top: 0; z-index: 80; transform: translateX(-100%); transition: .22s; } .sidebar.open { transform: none; } .admin-head { padding: 12px 14px; } } /* ------------------------------------------------------------ 模态框 */ .modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); z-index: 200; display: grid; place-items: center; padding: 22px; } .modal { width: 100%; max-width: 640px; max-height: 84vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-head b { font-size: 15px; font-weight: 650; } .modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; font-size: 13.5px; line-height: 1.8; } .modal-body h1, .modal-body h2, .modal-body h3 { font-size: 15px; margin: 16px 0 8px; } .modal-body p { margin: 0 0 10px; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .modal-foot .sp { flex: 1; } /* ------------------------------------------------- 节日主题装饰（整站） */ html[data-festival="spring"] body::after, html[data-festival="national"] body::after, html[data-festival="midautumn"] body::after, html[data-festival="christmas"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; } html[data-festival="spring"] .auth-wrap { background: radial-gradient(900px 480px at 50% -12%, rgba(230, 60, 60, .28), transparent 72%), radial-gradient(700px 380px at 110% 110%, rgba(230, 170, 40, .20), transparent 70%), var(--bg); } html[data-festival="national"] .auth-wrap { background: radial-gradient(900px 480px at 50% -12%, rgba(214, 40, 40, .30), transparent 72%), radial-gradient(700px 380px at 110% 110%, rgba(240, 200, 60, .18), transparent 70%), var(--bg); } html[data-festival="midautumn"] .auth-wrap { background: radial-gradient(900px 480px at 50% -12%, rgba(240, 180, 60, .26), transparent 72%), radial-gradient(700px 380px at 110% 110%, rgba(120, 90, 200, .18), transparent 70%), var(--bg); } html[data-festival="christmas"] .auth-wrap { background: radial-gradient(900px 480px at 50% -12%, rgba(210, 40, 40, .26), transparent 72%), radial-gradient(700px 380px at 110% 110%, rgba(30, 140, 80, .22), transparent 70%), var(--bg); } /* ------------------------------------------------- 登录页版式变体 */ .auth-col { width: 100%; max-width: 404px; } .auth-col .auth-card { max-width: 100%; } /* center：去掉卡片边框，内容直接居中铺开 */ html[data-login-theme="center"] .auth-card { background: transparent; border: none; box-shadow: none; padding: 8px 4px; } html[data-login-theme="center"] .auth-logo { width: 64px; height: 64px; border-radius: 20px; box-shadow: 0 18px 40px -16px var(--primary-glow); } html[data-login-theme="center"] .auth-card h1 { font-size: 24px; } /* banner：卡片更宽、圆角更大，配合上方横幅 */ html[data-login-theme="banner"] .auth-col { max-width: 460px; } html[data-login-theme="banner"] .auth-card { border-radius: 20px; padding-top: 26px; } /* minimal：更紧凑，弱化装饰 */ html[data-login-theme="minimal"] .auth-card { border-radius: 12px; padding: 22px 20px 16px; box-shadow: var(--shadow); } html[data-login-theme="minimal"] .auth-logo { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px; } html[data-login-theme="minimal"] .auth-card h1 { font-size: 18px; } html[data-login-theme="minimal"] .auth-tabs { margin-bottom: 14px; } /* 水印（自定义文字/图片时的容器） */ .auth-logo.is-text, .auth-logo.is-image { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } .auth-logo.is-image { padding: 0; overflow: hidden; } .brand-watermark { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); } /* ------------------------------------------------- 头像与文件下载 */ .avatar { cursor: pointer; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar.has-img { background: var(--panel3); border-color: var(--border); } .file-item .dl { margin-left: 8px; color: var(--mute); display: inline-flex; align-items: center; } .file-item .dl:hover { color: var(--primary); text-decoration: none; } /* ------------------------------------------------- 上传字段预览 */ .up-preview { margin-top: 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); min-height: 56px; padding: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg2); font-size: 12px; overflow: hidden; } .up-preview img { max-width: 100%; max-height: 132px; border-radius: 6px; display: block; } /* ------------------------------------------------- 人机验证 统一做成一张小卡片：图区圆角 + 描边 + 柔和阴影，控件一行排列， 窄屏（≤420px）下图片与滑轨自动收窄，不会横向溢出。 */ .captcha-box { margin: 6px 0 16px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 26px -20px rgba(20,32,66,.5); display: flex; flex-direction: column; gap: 10px; max-width: 100%; } .captcha-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .captcha-q { font-size: 19px; font-weight: 700; letter-spacing: 2px; font-family: var(--mono); padding: 10px 16px; border-radius: 12px; background: var(--panel3); border: 1px solid var(--border); display: inline-block; align-self: flex-start; color: var(--text); user-select: none; } .captcha-img { height: 52px; border-radius: 12px; border: 1px solid var(--border); display: block; background: #fff; box-shadow: 0 6px 16px -12px rgba(0,0,0,.55); cursor: pointer; transition: border-color .16s, transform .16s; } .captcha-img:hover { border-color: var(--primary-line); transform: translateY(-1px); } .slide-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 10px; line-height: 0; max-width: 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); } .slide-bg { display: block; width: 100%; } .slide-piece { position: absolute; left: 0; border: 2px solid rgba(255,255,255,.9); border-radius: 6px; background: rgba(255,255,255,.30); box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; } .slide-track { position: relative; height: 40px; border-radius: 999px; background: var(--panel3); border: 1px solid var(--border); user-select: none; touch-action: none; } .slide-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--primary-soft); } .slide-handle { position: absolute; left: 0; top: 2px; width: 40px; height: 34px; border-radius: 999px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: grab; box-shadow: 0 3px 10px -3px var(--primary-glow); } .slide-handle:active { cursor: grabbing; } .slide-tip { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--mute); pointer-events: none; transition: opacity .2s; } /* 协议弹窗多份时的内容区 */ .agree-pane { line-height: 1.85; } .agree-pane h1, .agree-pane h2, .agree-pane h3 { font-size: 15px; margin: 16px 0 8px; } .agree-pane h3:first-child { margin-top: 0; } /* ------------------------------------------------- 引导 / 宣传页 */ .landing { position: fixed; inset: 0; z-index: 300; overflow-y: auto; background: radial-gradient(900px 520px at 50% -8%, var(--primary-glow), transparent 70%), radial-gradient(700px 420px at 110% 108%, var(--primary-soft), transparent 72%), var(--bg); animation: landIn .26s ease; } .landing.out { opacity: 0; transition: opacity .2s; } @keyframes landIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } } .landing-inner { max-width: 880px; margin: 0 auto; padding: 44px 22px 64px; text-align: center; } .landing-media { margin-bottom: 26px; } .landing-media img { max-width: 100%; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: block; margin: 0 auto; } .landing-media.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .landing-media.multi img { width: 100%; height: 150px; object-fit: cover; margin: 0; } /* 没上传图片时的默认视觉 */ .landing-media.default { position: relative; height: 210px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 26px 60px -26px var(--primary-glow); margin-bottom: 30px; } .landing-orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.16); } .landing-orb.a { width: 260px; height: 260px; left: -70px; top: -90px; } .landing-orb.b { width: 190px; height: 190px; right: -50px; bottom: -80px; background: rgba(255,255,255,.12); } .landing-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); } .landing-title { margin: 0 0 10px; font-size: 30px; font-weight: 700; letter-spacing: -.5px; } .landing-sub { margin: 0 0 22px; font-size: 14.5px; color: var(--dim); } .landing-intro { text-align: left; max-width: 660px; margin: 0 auto 30px; line-height: 1.95; font-size: 14.5px; color: var(--text); } .landing-intro p { margin: 0 0 12px; } .landing-intro strong { color: var(--primary); } .landing-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 32px; text-align: left; } .landing-feat { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; transition: .16s; } .landing-feat:hover { border-color: var(--primary-line); transform: translateY(-2px); } .landing-feat-ic { color: var(--primary); margin-bottom: 2px; } .landing-feat b { font-size: 14px; } .landing-feat span { font-size: 12.5px; color: var(--dim); line-height: 1.65; } .landing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; } .landing-cta { padding: 12px 34px !important; font-size: 15px !important; height: auto; border-radius: 999px; } .landing-skip { background: transparent; border: 1px solid var(--border-strong); color: var(--dim); padding: 12px 24px; border-radius: 999px; font-size: 13.5px; cursor: pointer; } .landing-skip:hover { color: var(--text); border-color: var(--primary-line); } .landing-note { font-size: 12px; color: var(--mute); } @media (max-width: 640px) { .landing-inner { padding: 28px 16px 48px; } .landing-title { font-size: 23px; } .landing-media.default { height: 160px; } } /* 引导页图片管理 */ .land-imgs { display: flex; flex-wrap: wrap; gap: 10px; } .land-img { position: relative; width: 132px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } .land-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .land-img button { position: absolute; top: 4px; right: 4px; padding: 3px 6px !important; } /* 图表图例 */ .legend-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12.5px; color: var(--dim); } .legend-row .legend { display: inline-flex; align-items: center; gap: 6px; } .legend-row .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .legend-row .legend b { color: var(--text); font-weight: 600; } #statChart { display: block; } /* 危险操作确认弹窗与保存反馈 */ .dg-tip { margin-top: 14px; font-size: 12.5px; color: var(--warn-fg); } .dg-tip.ok { color: var(--ok-fg); } .modal-foot .sp { flex: 1; } .msg.flash { animation: msgFlash .9s ease; } @keyframes msgFlash { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } } button.flash-btn { animation: btnFlash .9s ease; } @keyframes btnFlash { 0% { box-shadow: 0 0 0 0 var(--primary-glow); } 50% { box-shadow: 0 0 0 6px var(--primary-glow); } 100% { box-shadow: 0 0 0 0 transparent; } } /* 权限勾选网格 */ .perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; } .perm-grid .agree-row { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); } .perm-grid .agree-row:hover { border-color: var(--primary-line); } /* ------------------------------------------------- 钱包与商城 */ .wallet-bar { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); } .plan-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel3); color: var(--dim); white-space: nowrap; } .plan-badge.standard { background: var(--primary-soft); color: var(--primary); } .plan-badge.pro { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 4px 12px -6px var(--primary-glow); } /* 额度区改为纵向排布：不再用 nowrap + 省略号，窄屏/不能缩放的浏览器也能看全 */ .wb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wb-balance { font-size: 19px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; } .wb-balance small { font-size: 11px; font-weight: 400; color: var(--mute); margin-left: 2px; } .wb-quota { margin-top: 8px; } .wb-quota-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--dim); margin-bottom: 4px; } .wb-quota-head span:last-child { font-variant-numeric: tabular-nums; } .wb-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; } .wb-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width .3s, background .3s; } .wb-bar i.warn { background: #d29922; } .wb-bar i.danger { background: #e5534b; } .wb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; } .wb-acts button { width: 100%; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .plan-card { position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px; background: var(--panel2); display: flex; flex-direction: column; gap: 6px; transition: .16s; } .plan-card:hover { border-color: var(--primary-line); transform: translateY(-2px); } .plan-card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-line); } .plan-card .nm { font-size: 14.5px; font-weight: 650; } .plan-card .pr { font-size: 22px; font-weight: 700; letter-spacing: -.5px; } .plan-card .pr small { font-size: 12px; font-weight: 400; color: var(--mute); } .plan-card .ds { font-size: 12px; color: var(--dim); line-height: 1.6; flex: 1; } .plan-card .bg { position: absolute; top: 10px; right: 10px; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; } .cost-row { text-align: center; font-size: 12px; color: var(--mute); padding: 6px 0 0; } .cost-row b { color: var(--primary); } .consume-line { max-width: 780px; margin: -8px auto 14px; text-align: right; font-size: 11.5px; color: var(--mute); } .consume-line b { color: var(--primary); } .order-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .order-row:last-child { border-bottom: none; } .order-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------- 维护公告 */ .mt-notice { border: 1px solid rgba(210,153,34,.5); background: rgba(210,153,34,.10); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; text-align: left; } .mt-notice-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--warn-fg); font-size: 15px; } .mt-notice-ic { display: inline-flex; } .mt-notice-b { font-size: 13.5px; line-height: 1.85; color: var(--text); } .mt-notice-b p { margin: 0 0 8px; } .mt-notice-b strong { color: var(--warn-fg); } .mt-notice-m { margin-top: 10px; font-size: 12.5px; color: var(--dim); line-height: 2; } .mt-notice-f { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(210,153,34,.3); font-size: 11.5px; color: var(--mute); } /* ---------------- 点选文字验证码 ---------------- */ .click-wrap { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #f5f7fb; } .click-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .click-glyph { position: absolute; display: grid; place-items: center; background: transparent; border: 0; padding: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 6px; } .click-glyph:hover { background: rgba(79, 124, 255, .12); } .click-glyph.on { background: rgba(79, 124, 255, .28); outline: 2px solid var(--primary); } .click-hint { margin-top: 8px; font-size: 12.5px; color: var(--dim); } .click-hint b { color: var(--primary); font-size: 14px; } .click-hint .picked { color: var(--mute); margin-left: 6px; } /* ---------------- 协议弹窗（标题与正文加粗、拒绝态） ---------------- */ .agree-pane h1, .agree-pane h2, .agree-pane h3, .agree-pane h4, .agree-pane strong, .agree-pane b { font-weight: 700; } .agree-pane h4 { font-size: 14px; margin: 14px 0 6px; } .seg-btn { font-weight: 600; } .agree-reject { text-align: center; padding: 18px 6px 6px; } .agree-reject .rj-ic { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f43f5e, #b91c1c); } .agree-reject h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; } .agree-reject p { margin: 0 0 16px; } /* ---------------- 账号安全：登录设备 / 异地提醒条 ---------------- */ .dev-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); margin-bottom: 8px; } .dev-item.cur { border-color: var(--primary-line); background: var(--primary-soft); } .dev-main { flex: 1; min-width: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .dev-main b { font-weight: 600; } .dev-conflict { flex-basis: 100%; margin-top: 4px; font-size: 12px; color: #b45309; } .conflict-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; font-size: 13px; background: linear-gradient(90deg, #fde68a, #fca5a5); color: #7c2d12; font-weight: 500; position: relative; z-index: 300; } .conflict-bar .sp { flex: 1; } .conflict-bar button { flex: none; } /* ---------------- 侧边栏收起（桌面端也支持） ---------------- */ /* 原来 .menu-btn 在 >820px 被隐藏、侧边栏固定展开，没有任何收起的途径。 现在：桌面端用 .layout.side-off 把侧栏滑出并用负外边距让主区占满； 移动端维持抽屉 + 遮罩。偏好记在 localStorage。 */ .menu-btn { display: inline-flex; } @media (min-width: 821px) { .sidebar { transition: margin-left .22s ease, opacity .18s ease; } .layout.side-off .sidebar { margin-left: -264px; opacity: 0; pointer-events: none; } .layout.side-off .main { flex: 1; } } /* 侧栏内部的收起按钮 */ .side-collapse { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; background: var(--bg2); border: 1px solid var(--border); color: var(--dim); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 12.5px; cursor: pointer; } .side-collapse:hover { border-color: var(--primary-line); color: var(--primary); } #sideMask { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 75; } .gw-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 75; } /* ---------------- 开源声明 / 登录开关 / AI 风险提示 ---------------- */ .oss-notice { margin: 10px 0 14px; padding: 11px 13px; border-radius: 11px; font-size: 12.3px; line-height: 1.75; background: linear-gradient(135deg, rgba(79,124,255,.14), rgba(16,185,129,.10)); border: 1px solid var(--primary-line); color: var(--dim); } .oss-notice b { color: var(--primary); font-weight: 700; } .login-off { margin: 0 0 14px; padding: 11px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.7; background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.45); color: #fda4af; } .ai-risk { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 12px; line-height: 1.7; background: rgba(210,153,34,.10); border: 1px solid rgba(210,153,34,.38); color: var(--dim); } .ai-risk b { color: #f0b429; font-weight: 700; } .ai-risk-bar { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } /* ---------------- 扫码登录 ---------------- */ .qr-login-box { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin: 6px 0 4px; } .qr-img-wrap { width: 176px; height: 176px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .qr-img-wrap img, .qr-img-wrap svg { width: 100%; height: 100%; display: block; } .qr-side { flex: 1; min-width: 180px; } .qr-code-line { font-size: 13px; color: var(--dim); margin: 4px 0 8px; } .qr-code-line b { font-family: var(--mono, monospace); font-size: 21px; letter-spacing: 4px; color: var(--primary); } .qr-img-wrap.expired { position: relative; } .qr-img-wrap.expired::after { content: '已失效，点右侧刷新'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,16,32,.82); color: #fff; font-size: 12.5px; } /* ---------------- AI 风险提示：带关闭按钮 ---------------- */ .ai-risk { position: relative; padding-right: 34px; } .ai-risk-x { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; line-height: 1; background: transparent; border: 0; color: var(--mute); font-size: 17px; cursor: pointer; border-radius: 6px; } .ai-risk-x:hover { background: rgba(127,127,127,.18); color: var(--fg); } /* ---------------- 图片点选验证码 ---------------- */ .imgclick-hit { position: absolute; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 50%; transition: background .15s, box-shadow .15s; } .imgclick-hit:hover { background: rgba(79, 124, 255, .14); } .imgclick-hit.on { background: rgba(79, 124, 255, .22); box-shadow: inset 0 0 0 3px var(--primary); } /* ---------------- 通知中心 ---------------- */ .nt-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5534b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; box-shadow: 0 2px 6px rgba(229,83,75,.5); } .nt-item { border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; margin-bottom: 9px; background: var(--bg2); } .nt-item.unread { border-color: var(--primary-line); background: var(--primary-soft); } .nt-item .nt-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nt-item .nt-h b { font-size: 13.5px; } .nt-item .nt-t { margin-left: auto; font-size: 11.5px; color: var(--mute); } .nt-item .nt-b { margin-top: 7px; font-size: 13px; line-height: 1.8; color: var(--dim); word-break: break-word; } .nt-item .nt-b p { margin: 0 0 8px; } .nt-item .nt-b ul, .nt-item .nt-b ol { margin: 6px 0; padding-left: 20px; } .nt-sum { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); border: 1px dashed var(--border); border-radius: 11px; padding: 10px 13px; margin-bottom: 12px; } .nt-sum b { color: var(--primary); } /* ---------------- AI 生成文件下载条 ---------------- */ /* --------------------------------------------------------- 我的图片 */ /* 卡片栅格：与原生界面「我的图片」面板同一套视觉（缩略图 1:1、圆角 12、两行元信息） */ .img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; } .img-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--hover); transition: border-color .15s, transform .15s; } .img-card:hover { border-color: var(--accent); } .img-card > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: zoom-in; background: var(--panel); } .img-body { padding: 9px 10px 10px; } .img-prompt { font-size: 12.5px; line-height: 1.5; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .img-meta { font-size: 11px; color: var(--mute); margin-top: 4px; } .img-acts { display: flex; gap: 8px; margin-top: 9px; } .img-btn { flex: 1; text-align: center; padding: 6px 0; border-radius: 8px; font-size: 12px; text-decoration: none; color: #fff; background: var(--accent, #4d6bfe); border: 1px solid var(--accent, #4d6bfe); transition: opacity .15s; } .img-btn:hover { opacity: .88; } .img-btn.ghost { flex: 0 0 auto; padding: 6px 11px; background: transparent; color: var(--mute); border-color: var(--border-strong); } .img-btn.ghost:hover { color: var(--fg); border-color: var(--accent); opacity: 1; } .img-empty { padding: 26px 14px; text-align: center; font-size: 12.5px; line-height: 1.9; color: var(--mute); border: 1px dashed var(--border); border-radius: 12px; } /* ------------------------------------------------------- 支付方式选择 */ /* 微信 / 支付宝二选一：整块可点，选中态描边+浅底，一眼看出选了哪个 */ .pay-ch-list { display: flex; flex-direction: column; gap: 9px; } .pay-ch { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 11px; cursor: pointer; font: inherit; border: 1px solid var(--border-strong); background: transparent; color: inherit; transition: .15s; } .pay-ch:hover { border-color: var(--accent); background: var(--hover); } .pay-ch.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); } .pay-ch-ico { font-size: 20px; line-height: 1; flex: none; } .pay-ch-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .pay-ch-txt b { font-size: 13.5px; font-weight: 600; } .pay-ch-txt small { font-size: 11.5px; color: var(--mute); } .pay-ch-ok { flex: none; color: var(--accent); font-weight: 700; } /* --------------------------------------------------------- 生成的图片 */ /* 直接把图显示在对话里：限宽、圆角、点开可看原图 */ .bubble .gen-img { display: block; max-width: 100%; width: auto; max-height: 60vh; margin: 2px 0 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--hover); cursor: zoom-in; } .gen-meta { font-size: 11.5px; color: var(--mute); margin-bottom: 6px; word-break: break-all; } .gen-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .gen-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 12px; line-height: 1.7; color: var(--dim); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; text-decoration: none; transition: .15s; } .gen-act:hover { color: var(--fg); border-color: var(--accent); background: var(--hover); } .gen-files { margin-top: 9px; padding: 10px 12px; border: 1px solid var(--primary-line); border-radius: 11px; background: var(--primary-soft); } .gen-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 8px; } .gen-head b { color: var(--primary); } .gen-all { margin-left: auto; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; } .gen-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; border-top: 1px dashed var(--border); } .gen-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, monospace); } .gen-dl { display: inline-flex; align-items: center; gap: 3px; flex: none; } /* ----------------------------------------------------------- 声音朗读 */ .bubble .bb-txt { display: block; white-space: pre-wrap; word-break: break-word; } .bb-speak { margin-top: 8px; padding: 3px 10px; font-size: 11.5px; line-height: 1.7; color: var(--dim); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; transition: .15s; } .bb-speak:hover { color: var(--fg); border-color: var(--accent); background: var(--hover); } /* 正在朗读的那一条：按钮高亮 + 轻微呼吸动画，一眼看出在读哪条 */ .bb-speak.speaking { color: var(--accent); border-color: var(--accent); background: var(--hover); animation: bbSpeakPulse 1.1s ease-in-out infinite; } @keyframes bbSpeakPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* 音色角色 / 语速档位按钮：等宽排列，小屏也不会挤成一团 */ #voiceBody .tts-role, #voiceBody .tts-speed { flex: 0 0 auto; min-width: 64px; border-radius: 999px; padding: 5px 12px; } #voiceBody #ttsRoleRow, #voiceBody #ttsSpeedRow { display: flex; flex-wrap: wrap; } /* 老浏览器不认识 :focus-visible / 变量时也不影响可用性 */ #voiceBody .tts-role:active, #voiceBody .tts-speed:active { transform: scale(.97); } #voiceBody input[type="range"] { accent-color: var(--accent); height: 22px; } #voiceBody select { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--input-bg, var(--panel)); color: var(--fg); font-size: 13px; } /* 人机验证：移动端适配与细节增强 */ @media (max-width: 420px) { .captcha-box { padding: 11px; border-radius: 12px; } .captcha-img { height: 46px; } .click-wrap, .slide-wrap { max-width: 100%; } .slide-track { max-width: 100%; } } .click-wrap { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #f5f7fb; max-width: 100%; box-shadow: 0 8px 20px -16px rgba(0,0,0,.6); } .click-hint { margin-top: 2px; font-size: 12.5px; color: var(--dim); line-height: 1.7; } .click-hint b { color: var(--primary); font-size: 15px; letter-spacing: 1px; } .click-hint .picked { color: var(--mute); margin-left: 6px; } .click-glyph { transition: background .14s, outline-color .14s; border-radius: 8px; } .click-glyph:hover { background: rgba(79,124,255,.14); } .click-glyph.on { background: rgba(79,124,255,.30); outline: 2px solid var(--primary); outline-offset: 1px; } .imgclick-hit { transition: background .14s; } .imgclick-hit:hover { background: rgba(79,124,255,.16); } .imgclick-hit.on { background: rgba(79,124,255,.24); box-shadow: inset 0 0 0 3px var(--primary); } .slide-handle { transition: box-shadow .16s, filter .16s; } .slide-handle:hover { filter: brightness(1.08); box-shadow: 0 6px 18px -6px var(--primary-glow); } .slide-handle:active { filter: brightness(.95); } .slide-tip { font-weight: 500; letter-spacing: .3px; } /* ------------------------------------------------------- 侧边栏菜单 */ /* 把账户类入口从钱包条里拿出来，排成规整菜单：分组标题 + 图标 + 文字，不再挤着挡消息 */ .side-menu { margin-top: 10px; } .side-sec { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 12px 4px 6px; } .side-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; margin-bottom: 4px; border-radius: 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--fg); background: transparent; border: 1px solid transparent; transition: .15s; } .side-item:hover { background: var(--hover); border-color: var(--border); } .side-item.primary { background: var(--accent, #4d6bfe); border-color: var(--accent, #4d6bfe); color: #fff; } .side-item.primary:hover { opacity: .9; } .si-ico { flex: none; width: 18px; text-align: center; font-size: 14px; } .native-btn { margin-top: 6px; } /* ------------------------------------------------------- 上传附件 */ .file-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; } .fchip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px 4px 10px; border-radius: 999px; font-size: 12px; background: var(--hover); border: 1px solid var(--border); } .fchip b { font-weight: 600; } .fchip small { color: var(--mute); font-size: 11px; } .fchip .fx { border: none; background: transparent; color: var(--mute); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; } .fchip .fx:hover { color: var(--danger); } /* 断点续传上传：进度条 + 「继续未完成的上传」 */ .up-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 10px 8px; font-size: 12px; color: var(--dim); } .up-bar .up-text { flex: 1; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .up-bar .up-track { flex: none; width: 160px; height: 5px; border-radius: 999px; background: var(--hover); overflow: hidden; border: 1px solid var(--border); } .up-bar .up-track i { display: block; height: 100%; width: 0; background: var(--accent, #4d6bfe); transition: width .18s linear; } .up-bar .sm { flex: none; } .icon-btn { flex: none; width: 40px; padding: 0; font-size: 17px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: 10px; background: transparent; color: var(--fg); } .icon-btn:hover { border-color: var(--accent); background: var(--hover); } /* 注册页邮箱教程入口：小字、可点、不喧宾夺主 */ .reg-help { margin: -4px 0 4px; font-size: 12px; line-height: 1.7; } .reg-help a { color: var(--accent, #4d6bfe); text-decoration: none; border-bottom: 1px dashed currentColor; } .reg-help a:hover { opacity: .85; } /* 代登录提示条：黄色提醒 + 一键回到自己账号 */ .imp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; font-size: 12.5px; background: rgba(210,150,30,.14); border-bottom: 1px solid rgba(210,150,30,.35); color: var(--warn-fg, #8a5b00); } .imp-bar button { margin-left: auto; flex: none; } /* ------------------------------------------------------- 上传按钮与拖拽 */ /* 按钮带文字，用户才知道这里能上传（原来只有个 📎 图标） */ .icon-btn.file-btn { width: auto; padding: 0 12px; font-size: 13px; white-space: nowrap; } .composer.drag-over { outline: 2px dashed var(--accent, #4d6bfe); outline-offset: -4px; background: color-mix(in srgb, var(--accent, #4d6bfe) 8%, transparent); } /* 二维码能力提示 */ .qr-hint { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.8; background: var(--hover); border: 1px dashed var(--border-strong); } /* ------------------------------------------------------- 侧边栏滚动 */ /* 侧边栏内容多时（菜单 + 会话列表）必须能滚动，否则底部按钮点不到 */ .sidebar { overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } .sidebar .side-menu { flex: none; } .sidebar .convs { min-height: 0; } /* ------------------------------------------------------- 气泡头像 */ /* 用户用自己头像（无则首字母），AI 固定机器人图标 —— 一眼分清谁在说话 */ .bubble.with-av, .bubble { position: relative; } .bb-av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; font-size: 12px; font-weight: 700; overflow: hidden; vertical-align: top; margin-right: 8px; } .bb-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .bb-av.user { background: var(--accent, #4d6bfe); color: #fff; } .bb-av.ai { background: color-mix(in srgb, var(--accent, #4d6bfe) 14%, transparent); color: var(--accent, #4d6bfe); border: 1px solid color-mix(in srgb, var(--accent, #4d6bfe) 35%, transparent); } .bubble .bb-txt { display: inline; } .bubble { display: flex; flex-wrap: wrap; align-items: flex-start; } .bubble .bb-speak { flex-basis: 100%; } /* ------------------------------------------------------- 使用指南 */ .gd-sec { margin-bottom: 16px; } .gd-t { font-size: 13px; font-weight: 700; margin-bottom: 8px; padding-left: 8px; border-left: 3px solid var(--accent, #4d6bfe); } .gd-row { display: flex; gap: 10px; padding: 6px 0; font-size: 12.5px; line-height: 1.75; border-top: 1px dashed var(--border); } .gd-row b { flex: 0 0 92px; color: var(--fg); } .gd-row span { flex: 1; min-width: 0; color: var(--dim); } /* ------------------------------------------------------- 购买成功 */ .buy-ok { text-align: center; padding: 8px 0 4px; } .buy-ok-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #34d399, #10b981); } .buy-ok-name { font-size: 17px; font-weight: 700; } .buy-ok-desc { font-size: 12.5px; color: var(--mute); margin-top: 6px; line-height: 1.7; } .buy-ok-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 12.5px; border-top: 1px dashed var(--border); } .buy-ok-row span { color: var(--mute); } /* ======================================================= 后台导航分组 */ /* 原来 20 个功能扁平排成一长条，找个功能要滚半天；现在按用途分成 5 组 */ .nav-sec { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 14px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 12px; border-radius: 9px; margin-bottom: 2px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--fg); background: transparent; border: 1px solid transparent; transition: .15s; } .nav-item:hover { background: var(--hover); } .nav-item.on { background: color-mix(in srgb, var(--accent, #4d6bfe) 12%, transparent); color: var(--accent, #4d6bfe); font-weight: 600; } /* ======================================================= 活动中心（后台） */ .draw-card { margin-bottom: 12px; } .draw-prize-list { margin-top: 6px; } .draw-prize-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; font-size: 12.5px; border-top: 1px dashed var(--border); } .draw-prize-row .t { flex: 1; min-width: 120px; font-weight: 600; } .draw-prize-row .sm { padding: 3px 10px; font-size: 11.5px; }