/* 全站基础样式：尽量保持轻量 & 可逐步扩展 */ :root{ --bg: #f4f6fb; --panel: rgba(255,255,255,.92); --text: #1f2329; --muted: #6b7280; --border: rgba(0,0,0,.08); --primary: #1677ff; --primary-weak: rgba(22,119,255,.12); --shadow: 0 10px 30px rgba(0,0,0,.10); --radius: 14px; --font: Arial,"Microsoft YaHei",sans-serif; } html,body{height:100%} body{ margin:0; font-family:var(--font); color:var(--text); background: var(--bg); } /* 主题挂在 ，避免 body 未就绪导致的闪烁 */ html.light{ --bg:#f4f6fb; --panel: rgba(255,255,255,.92); --text:#1f2329; --muted:#6b7280; --border: rgba(0,0,0,.08); } html.warm{ --bg:#f4f1e8; --panel: rgba(255,253,247,.92); --text:#1f2329; --muted:#6b645a; --border: rgba(0,0,0,.08); } html.dark{ --bg:#151515; --panel: rgba(34,34,34,.92); --text:#e8e8e8; --muted:#a8a8a8; --border: rgba(255,255,255,.10); --shadow: 0 10px 30px rgba(0,0,0,.35); } /* 背景策略：列表/首页可 fancy，阅读页建议 flat */ body.bg-fancy{ background: radial-gradient(1200px 600px at 10% 0%, rgba(22,119,255,.16), transparent 60%), radial-gradient(900px 520px at 90% 10%, rgba(250,140,22,.14), transparent 60%), var(--bg); } body.bg-flat{background: var(--bg);} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} .container{ max-width:1200px; margin:18px auto 24px; background:var(--panel); backdrop-filter: blur(6px); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); } .muted{color:var(--muted);font-size:13px} .btn{ display:inline-flex;align-items:center;justify-content:center; padding:10px 14px; border-radius:10px; border:1px solid transparent; background:var(--primary); color:#fff; cursor:pointer; font-size:14px; text-decoration:none; user-select:none; } .btn.secondary{ background:var(--primary-weak); color:var(--primary); border-color: rgba(22,119,255,.18); } html.dark .btn.secondary{ background: rgba(108,168,255,.18); border-color: rgba(108,168,255,.22); color:#6ca8ff; } .input, select{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.85); color:var(--text); outline:none; } html.dark .input, html.dark select{background:rgba(0,0,0,.25)} .input:focus, select:focus{ border-color: rgba(22,119,255,.45); box-shadow: 0 0 0 3px rgba(22,119,255,.12); } .card{ border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.86); } html.dark .card{background:rgba(25,25,25,.90)} .sectionTitle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .sectionTitle h2{margin:0} .toast{ position:fixed;left:50%;bottom:22px;transform:translateX(-50%); background:rgba(0,0,0,.78);color:#fff; padding:10px 14px;border-radius:999px;font-size:13px; display:none;z-index:9999 } /* 沉浸模式：滚动时隐藏工具栏（仅阅读页启用） */ .appTop{transition:transform .18s ease} .page-reader .bottomBar{transition:transform .18s ease} .toolbars-hidden .appTop{transform:translateY(-120%)} .page-reader.toolbars-hidden .bottomBar{transform:translateY(120%)} @media (max-width:768px){ .container{margin:0;border-radius:0;padding:14px} }