/* Gene 官网 / 后台 / 客服 共用样式 —— 支持日间 / 夜间双主题，贴合桌面客户端 UI。 夜间 = 默认（:root）；日间 = [data-theme="light"] 覆盖。主题由 /theme.js 切换、 localStorage('gene_theme') 记忆、各页 内联脚本在首帧前落定（无闪烁）。 */ :root{ color-scheme:dark; --bg:#0e1014; --bg2:#12141a; --panel:#181b22; --panel2:#1f232c; --line:#262b35; --text:#ECEEF3; --muted:#9aa1b0; --muted2:#6b7280; --accent:#39d98a; --accent2:#2bbf76; --danger:#ff5d5d; --warn:#f5a623; --blue:#5b8cff; --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35); --bg-glow:#1a2030; /* body 顶部光晕 */ --scroll-thumb:var(--line); --scroll-thumb-hover:#39414f; --toast-bg:#0b0d11; --danger-bg:#3a2330; --danger-line:#5a2f3f; --danger-fg:#fff; --pill-green-bg:#10241a; --pill-green-line:#244a38; --pill-red-bg:#241016; --pill-red-line:#4a2430; --pill-amber-bg:#241c10; --pill-amber-line:#4a3a18; } :root[data-theme="light"]{ color-scheme:light; --bg:#f5f7fa; --bg2:#ffffff; --panel:#ffffff; --panel2:#f1f4f8; --line:#e4e8ef; --text:#1a1d24; --muted:#5b6270; --muted2:#8b93a3; --accent:#0ea472; --accent2:#0b8a5f; --danger:#e5484d; --warn:#c77700; --blue:#3b6fe0; --shadow:0 8px 30px rgba(20,30,50,.10); --bg-glow:#e9eef6; --scroll-thumb:#cfd6e2; --scroll-thumb-hover:#b4bdce; --toast-bg:#ffffff; --danger-bg:#fdecec; --danger-line:#f3c7c7; --danger-fg:#c0353a; --pill-green-bg:#e6f6ee; --pill-green-line:#bfe6d1; --pill-red-bg:#fdecec; --pill-red-line:#f3c7c7; --pill-amber-bg:#fbf1dc; --pill-amber-line:#efd6a6; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:radial-gradient(1200px 600px at 70% -10%, var(--bg-glow) 0%, var(--bg) 55%) fixed; color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .25s ease, color .25s ease; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .container{max-width:1080px;margin:0 auto;padding:0 20px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:11px 20px;border-radius:10px;border:1px solid var(--line); background:var(--panel2);color:var(--text);font-size:14px;font-weight:600; cursor:pointer;transition:.15s;text-decoration:none;white-space:nowrap; } .btn:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-1px)} .btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:transparent;color:#06120c} .btn.primary:hover{filter:brightness(1.05)} .btn.ghost{background:transparent} .btn.danger{color:var(--danger-fg);background:var(--danger-bg);border-color:var(--danger-line)} .btn.danger:hover{border-color:var(--danger)} .btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} input,select,textarea{ background:var(--bg2);border:1px solid var(--line);color:var(--text); border-radius:9px;padding:10px 12px;font-size:14px;font-family:inherit;outline:none;width:100%; } input:focus,select:focus,textarea:focus{border-color:var(--accent)} label{font-size:12.5px;color:var(--muted);display:block;margin:10px 0 4px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px} .muted{color:var(--muted)} .pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line)} .pill.green{color:var(--accent);border-color:var(--pill-green-line);background:var(--pill-green-bg)} .pill.red{color:var(--danger);border-color:var(--pill-red-line);background:var(--pill-red-bg)} .pill.grey{color:var(--muted)} .pill.amber{color:var(--warn);border-color:var(--pill-amber-line);background:var(--pill-amber-bg)} .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%); background:var(--toast-bg);color:var(--text);border:1px solid var(--line);padding:11px 18px;border-radius:10px; box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:9999;font-size:14px;max-width:90vw} .toast.show{opacity:1} .toast.err{border-color:var(--danger-line)} .hidden{display:none!important} /* 日间 / 夜间 切换按钮 —— 内含两个内联 SVG（太阳/月亮），按 data-theme 切换显隐。 */ .theme-toggle{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text); cursor:pointer;padding:0;transition:.15s} .theme-toggle:hover{border-color:var(--accent);color:var(--accent)} .theme-toggle svg{width:18px;height:18px;display:block} .theme-toggle .i-moon{display:none} [data-theme="light"] .theme-toggle .i-sun{display:none} [data-theme="light"] .theme-toggle .i-moon{display:block} .theme-toggle.fixed{position:fixed;top:14px;right:16px;z-index:60} /* 深色滚动条 —— 全站共用（客服聊天 .stream / 后台 .main/.threads / textarea 等）。 Firefox 用 scrollbar-color，Chromium/WebKit 用 ::-webkit-scrollbar。 */ *{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)} ::-webkit-scrollbar-corner{background:transparent}