/* ============================================================ 全站主题（深色 / 浅色 / 跟随系统）· 所有页面共用 ------------------------------------------------------------ · 深色 = 原配色，本文件不做任何改动（默认即深色）； · 浅色 = 新增，全部规则都以 html[data-theme="light"] 前缀限定，只在浅色模式生效，不影响深色皮肤； · html 上的 data-theme 由 theme.js 与里的内联预设写入，内联预设保证首屏不出现「浅色用户先闪一下深色」(FOUC)。 · 强调色：页面用声明自己的主色，浅色下自动换成同色系但更深的可读色； · 画布类游戏（水族馆/投篮/发泄墙/木鱼/禅意沙画）场景本身是绘制出来的，用标记，浅色下对 canvas 做反相+色相还原，场景变浅的同时保留原本的色彩关系。 ============================================================ */ /* ============================================================ 1) 主题色令牌 ============================================================ */ html[data-theme="light"]{ color-scheme:light; /* 强调色默认值（金色系） */ --acc:#96690c;--acc-ink:#8a5a12;--acc-bg:rgba(150,105,12,.10);--acc-bd:rgba(150,105,12,.40); /* 基础色板 */ --t-bg:#f5f2ea;--t-srf:#ffffff;--t-line:rgba(35,45,40,.12); --t-ink:#2f3a35;--t-ink2:#4d5a54;--t-ink3:#7c8880; --t-head:#8a5a12;--t-link:#1c6fa8;--t-plum:#8a5cb0; --t-soft:rgba(35,45,40,.045);--t-soft2:rgba(35,45,40,.08); } html[data-theme="light"] [data-acc="pink"]{--acc:#c04b63;--acc-ink:#ad3b53;--acc-bg:rgba(192,75,99,.10);--acc-bd:rgba(192,75,99,.40)} html[data-theme="light"] [data-acc="gold"]{--acc:#96690c;--acc-ink:#8a5a12;--acc-bg:rgba(150,105,12,.10);--acc-bd:rgba(150,105,12,.40)} html[data-theme="light"] [data-acc="orange"]{--acc:#b25a0f;--acc-ink:#a25210;--acc-bg:rgba(178,90,15,.10);--acc-bd:rgba(178,90,15,.40)} html[data-theme="light"] [data-acc="red"]{--acc:#bd3a2b;--acc-ink:#a93226;--acc-bg:rgba(189,58,43,.10);--acc-bd:rgba(189,58,43,.40)} html[data-theme="light"] [data-acc="sand"]{--acc:#8b6a38;--acc-ink:#7a5c30;--acc-bg:rgba(139,106,56,.10);--acc-bd:rgba(139,106,56,.40)} html[data-theme="light"] [data-acc="cyan"]{--acc:#1c6f8c;--acc-ink:#186279;--acc-bg:rgba(28,111,140,.10);--acc-bd:rgba(28,111,140,.40)} html[data-theme="light"] [data-acc="purple"]{--acc:#6d4bb5;--acc-ink:#60419f;--acc-bg:rgba(109,75,181,.10);--acc-bd:rgba(109,75,181,.40)} /* ============================================================ 2) 基础排版 ============================================================ */ html[data-theme="light"] body{background:var(--t-bg);color:var(--t-ink)} html[data-theme="light"] a{color:var(--t-link)} html[data-theme="light"] ::selection{background:rgba(150,105,12,.22)} /* 画布类游戏：场景反相 + 色相还原，深色场景变浅、配色关系基本保留 */ html[data-theme="light"] body[data-scene="dark"] canvas{filter:invert(1) hue-rotate(180deg)} /* ============================================================ 3) 首页 ============================================================ */ html[data-theme="light"] .hero h1 span{background:linear-gradient(90deg,#d4566f,#b0499f,#1b74b8); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} html[data-theme="light"] .hero p{color:var(--t-ink3)} html[data-theme="light"] .hero .motto{color:var(--t-link);background:rgba(28,111,168,.10)} html[data-theme="light"] .goods-entry{color:var(--acc-ink); background:linear-gradient(90deg,rgba(212,86,111,.13),rgba(28,111,168,.13));border-color:var(--acc-bd)} html[data-theme="light"] .goods-entry:hover{background:linear-gradient(90deg,rgba(212,86,111,.22),rgba(28,111,168,.22))} html[data-theme="light"] .card{background:var(--t-srf);border-color:var(--t-line);color:var(--t-ink); box-shadow:0 1px 3px rgba(35,45,40,.05)} html[data-theme="light"] .card p{color:#63716a} html[data-theme="light"] .tags span{background:rgba(35,45,40,.06);color:#586761} html[data-theme="light"] .card.rec{border-color:rgba(192,75,99,.35)} html[data-theme="light"] .badge{box-shadow:0 1px 5px rgba(35,45,40,.18)} html[data-theme="light"] .badge.rec{background:linear-gradient(90deg,#d4566f,#b0499f);color:#fff} html[data-theme="light"] .badge.new{background:linear-gradient(90deg,#e8a13c,#e0761f);color:#3a2508} html[data-theme="light"] footer{color:var(--t-ink3);border-top-color:var(--t-line)} html[data-theme="light"] footer a{color:#6c7b74} html[data-theme="light"] footer a:hover{color:var(--t-plum)} @media (hover:hover) and (pointer:fine){ html[data-theme="light"] .card:hover{background:var(--t-srf);border-color:rgba(35,45,40,.2); box-shadow:0 6px 18px rgba(35,45,40,.10)} } /* ============================================================ 4) 文档 / 文章（doc.css 系列：专栏列表、文章页、关于、隐私、联系） ============================================================ */ html[data-theme="light"] .doc-top{background:rgba(250,248,243,.88);border-bottom-color:var(--t-line)} html[data-theme="light"] .doc-top .back{color:var(--t-head)} html[data-theme="light"] .doc-top .sitename{color:var(--t-ink3)} html[data-theme="light"] .doc h1{color:var(--t-head)} html[data-theme="light"] .doc .updated{color:var(--t-ink3)} html[data-theme="light"] .doc .lead{color:var(--t-ink2);background:var(--t-srf);border-color:var(--t-line)} html[data-theme="light"] .doc h2{color:var(--t-head);border-left-color:var(--t-head)} html[data-theme="light"] .doc h3{color:var(--t-plum)} html[data-theme="light"] .doc p{color:var(--t-ink2)} html[data-theme="light"] .doc li{color:var(--t-ink2)} html[data-theme="light"] .doc strong{color:var(--t-head)} html[data-theme="light"] .doc a{color:var(--t-link);border-bottom-color:rgba(28,111,168,.35)} html[data-theme="light"] .doc a:hover{color:#125c8e} html[data-theme="light"] .doc code{background:var(--t-soft2);color:var(--t-head)} html[data-theme="light"] .doc .game-list li{background:var(--t-srf);border-color:var(--t-line)} html[data-theme="light"] .doc .game-list b{color:var(--t-head)} /* 分类色：浅色下换成同色系深色，保证白底上的可读性 */ html[data-theme="light"] [data-cat="sound"]{--c:#1c6fa8} html[data-theme="light"] [data-cat="mindful"]{--c:#8a5cb0} html[data-theme="light"] [data-cat="touch"]{--c:#1c7f62} html[data-theme="light"] [data-cat="focus"]{--c:#8a5a12} /* 分类筛选条 */ html[data-theme="light"] .cat-btn{background:var(--t-soft);border-color:var(--t-line);color:#586761} html[data-theme="light"] .cat-btn:hover{background:var(--t-soft2);color:var(--t-ink)} html[data-theme="light"] .cat-btn[aria-pressed="true"]{background:rgba(150,105,12,.14); border-color:rgba(150,105,12,.5);color:var(--t-head)} /* 一行一条的文章列表 */ html[data-theme="light"] .doc .post-item{background:var(--t-srf);border-color:var(--t-line); box-shadow:0 1px 3px rgba(35,45,40,.04)} html[data-theme="light"] .doc .post-item:hover{background:var(--t-srf);box-shadow:0 5px 16px rgba(35,45,40,.09)} html[data-theme="light"] .cat-tag{border-color:rgba(35,45,40,.14);background:rgba(35,45,40,.035);color:var(--c,#1c6fa8)} html[data-theme="light"] .doc .post-title{color:var(--t-head)} html[data-theme="light"] .doc .post-title a{color:var(--t-head)} html[data-theme="light"] .doc .post-title a:hover{color:#6d4409} html[data-theme="light"] .doc .post-desc{color:#586761} html[data-theme="light"] .doc .post-meta{color:var(--t-ink3)} html[data-theme="light"] .post-meta .more{color:var(--t-link)} /* 分页条 */ html[data-theme="light"] .page-bar button{background:var(--t-srf);border-color:var(--t-line);color:#4f5d57} html[data-theme="light"] .page-bar button:hover:not(:disabled){background:var(--t-soft);color:var(--t-ink)} html[data-theme="light"] .page-bar button[aria-current="true"]{background:var(--t-head);border-color:var(--t-head);color:#fff} html[data-theme="light"] .page-bar button:disabled{color:#b3bdb7;border-color:rgba(35,45,40,.08)} html[data-theme="light"] .page-bar .sep{color:#b3bdb7} html[data-theme="light"] .page-info{color:var(--t-ink3)} /* 文章页面包屑 / 侧栏 */ html[data-theme="light"] .crumb{color:var(--t-ink3)} html[data-theme="light"] .crumb a{color:#6c7b74} html[data-theme="light"] .crumb a:hover{color:var(--t-plum)} html[data-theme="light"] .side-card{background:var(--t-srf);border-color:var(--t-line)} html[data-theme="light"] .side-card h2,html[data-theme="light"] .side-card h3{color:var(--t-head)} html[data-theme="light"] .side-list a{color:#586761} html[data-theme="light"] .side-list a:hover{background:var(--t-soft);color:var(--t-ink)} html[data-theme="light"] .side-list a.current{background:rgba(150,105,12,.13);color:var(--t-head); border-left-color:var(--t-head)} html[data-theme="light"] .side-list a .n{color:#98a49e} html[data-theme="light"] .side-cat{color:var(--t-ink3)} html[data-theme="light"] .side-nav .pager a{background:var(--t-soft);border-color:var(--t-line);color:#586761} html[data-theme="light"] .side-nav .pager a:hover{background:var(--t-soft2);color:var(--t-ink)} html[data-theme="light"] .nav-toggle{color:var(--t-head);background:rgba(150,105,12,.10); border-color:rgba(150,105,12,.32)} /* 相关文章 */ html[data-theme="light"] .related{border-top-color:var(--t-line)} html[data-theme="light"] .rel-list a{background:var(--t-srf);border-color:var(--t-line); box-shadow:0 1px 3px rgba(35,45,40,.04)} html[data-theme="light"] .rel-list a:hover{background:var(--t-srf);box-shadow:0 5px 16px rgba(35,45,40,.09)} html[data-theme="light"] .rel-list .rel-t{color:var(--t-head)} html[data-theme="light"] .rel-list .rel-d{color:#68766f} /* 文档页页脚 */ html[data-theme="light"] .doc-foot{color:var(--t-ink3);border-top-color:var(--t-line)} html[data-theme="light"] .flinks a,html[data-theme="light"] .f-beian a{color:#6c7b74} html[data-theme="light"] .flinks a:hover,html[data-theme="light"] .f-beian a:hover{color:var(--t-plum)} /* ============================================================ 5) 游戏页外壳（HUD / 统计 / 提示条 / 说明弹层 / 规则卡） ------------------------------------------------------------ 注意：整屏 canvas 绘制的六个游戏页（电子木鱼 / 照片转沙画 / 摸鱼水族馆 / 纸团投篮 / 发泄墙 / 禅意沙画）已改为不接主题—— 它们不引本文件，页头也没有主题按钮。下面若有个别选择器（水族馆的 .lpanel/.stepper/.dock、沙画的 .brush/.gsz/.drop 等）在现有页面里已无命中对象，属历史遗留，留作以后复用参考。 ============================================================ */ html[data-theme="light"] .hud{background:linear-gradient(180deg,rgba(245,242,234,.94),rgba(245,242,234,0))} html[data-theme="light"] .hud h1{color:var(--acc-ink)} html[data-theme="light"] .foot{background:linear-gradient(0deg,rgba(245,242,234,.94),rgba(245,242,234,0))} html[data-theme="light"] .hud-right{color:var(--t-ink3)} html[data-theme="light"] .back{background:var(--acc-bg);border-color:var(--acc-bd);color:var(--acc-ink); box-shadow:none} html[data-theme="light"] .back:hover{background:var(--acc-bg);color:var(--acc-ink);filter:brightness(.94)} html[data-theme="light"] .sndbtn{background:var(--t-soft);border-color:var(--t-line);color:#4f5d57} html[data-theme="light"] .sndbtn:hover{background:var(--t-soft2)} html[data-theme="light"] .infobtn{background:var(--t-soft);border-color:var(--acc-bd);color:var(--acc-ink)} html[data-theme="light"] .infobtn:hover{background:var(--acc-bg)} html[data-theme="light"] .stats{color:var(--t-ink3)} html[data-theme="light"] .stats b{color:var(--acc)} html[data-theme="light"] .stat .v{color:var(--acc-ink);text-shadow:none} html[data-theme="light"] .stat .l{color:#7c8880} html[data-theme="light"] .tip{background:rgba(255,255,255,.86);color:#5b6a63;border:1px solid var(--t-line); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} html[data-theme="light"] .hint{color:var(--t-ink3)} html[data-theme="light"] .footnote{color:var(--t-ink3)} html[data-theme="light"] .wind{color:var(--t-link);background:rgba(28,111,168,.10)} html[data-theme="light"] .rules{background:var(--t-srf);border-color:var(--t-line)} html[data-theme="light"] .rules .rt{color:var(--acc-ink)} html[data-theme="light"] .rules li{color:var(--t-ink2)} html[data-theme="light"] .rules li b{color:var(--acc-ink)} html[data-theme="light"] .stage{background:var(--t-srf);border-color:var(--t-line); box-shadow:0 1px 3px rgba(35,45,40,.05)} html[data-theme="light"] .stage .big,html[data-theme="light"] .big{color:var(--t-ink)} html[data-theme="light"] .sub{color:var(--t-ink3)} /* 反应力测试面板：四个状态各有自己的底色，浅色皮肤必须逐态重写一遍，否则会被上面那条 .stage 规则（权重更高）统一压成白卡，出现「该变绿没变绿、该变红没变红」的问题。 */ html[data-theme="light"] .stage.waiting{background:#d3dbe6;border-color:#bcc8d7;box-shadow:none} html[data-theme="light"] .stage.waiting .big{color:#3d4b5a} html[data-theme="light"] .stage.waiting .sub{color:#65758a} html[data-theme="light"] .stage.go{background:#2e9e5b;border-color:#2e9e5b; box-shadow:0 0 0 4px rgba(46,158,91,.26),0 10px 30px rgba(46,158,91,.24)} html[data-theme="light"] .stage.go .big{color:#06281a} html[data-theme="light"] .stage.go .sub{color:#0c3a22} html[data-theme="light"] .stage.foul{background:#c0392b;border-color:#c0392b;box-shadow:none} html[data-theme="light"] .stage.foul .big{color:#fff} html[data-theme="light"] .stage.foul .sub{color:#ffe2e0} html[data-theme="light"] .stage.result{background:#fffdf4;border-color:rgba(150,105,12,.42); box-shadow:0 1px 3px rgba(35,45,40,.05)} html[data-theme="light"] .stage.result .big{color:var(--acc-ink);text-shadow:none} /* 气泡捏捏乐：游戏区自成一块深色画板，框内保持原色调不随主题变化（气泡是低饱和半透明球，浮在浅底上会糊成一片，只有深底才对味） */ html[data-theme="light"] #board{background:#26302b;border:1px solid rgba(35,45,40,.3); border-radius:20px;box-shadow:0 6px 22px rgba(35,45,40,.16)} /* 说明弹层 */ html[data-theme="light"] .guide{background:rgba(255,255,255,.98);border-color:var(--acc-bd);color:#46534d; box-shadow:0 12px 40px rgba(35,45,40,.16)} html[data-theme="light"] .guide h2{color:var(--acc-ink)} html[data-theme="light"] .guide .seo{color:#6b7a73;border-left-color:var(--acc-bd)} html[data-theme="light"] .guide .gclose{background:var(--acc);color:#fff} html[data-theme="light"] .guide .gclose:hover{background:var(--acc-ink)} /* 按钮 / 分段控件 */ html[data-theme="light"] .btn{border-color:var(--acc-bd);background:var(--acc-bg);color:var(--acc-ink)} html[data-theme="light"] .btn:hover{background:var(--acc-bg);filter:brightness(.95)} html[data-theme="light"] .btn.on{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:none} html[data-theme="light"] .btn.warn{border-color:rgba(189,58,43,.35);background:rgba(189,58,43,.08);color:#a93226} html[data-theme="light"] .btn.warn:hover{background:rgba(189,58,43,.14)} html[data-theme="light"] .seg{border-color:var(--acc-bd);color:var(--acc-ink)} html[data-theme="light"] .seg.active{background:var(--acc);color:#fff;border-color:var(--acc)} html[data-theme="light"] .reset{background:linear-gradient(90deg,#d4566f,#b0499f);color:#fff} html[data-theme="light"] .clear{background:var(--t-soft2);color:var(--t-ink2);border-color:var(--t-line)} html[data-theme="light"] .save{background:var(--acc);color:#fff} html[data-theme="light"] .act.save{background:var(--acc);color:#fff} html[data-theme="light"] .act.clear{background:var(--t-soft2);color:var(--t-ink2)} html[data-theme="light"] .brush button{background:var(--t-srf);color:#5b6a63;border-color:var(--t-line)} html[data-theme="light"] .brush button.on{background:var(--acc);color:#fff;border-color:var(--acc)} html[data-theme="light"] .colors button.on{border-color:#2f3a35} html[data-theme="light"] .sel{background:var(--t-srf);color:var(--t-ink2);border-color:var(--t-line)} html[data-theme="light"] .gsz{color:#6b7a73} html[data-theme="light"] .drop{background:var(--t-srf);color:#6b7a73;border-color:rgba(139,106,56,.4)} html[data-theme="light"] .drop b{color:var(--acc-ink)} html[data-theme="light"] .pbar{background:var(--acc)} html[data-theme="light"] .bar{background:rgba(35,45,40,.12)} html[data-theme="light"] .winCard{background:var(--t-srf);border-color:var(--t-line); box-shadow:0 10px 34px rgba(35,45,40,.14)} html[data-theme="light"] .winCard h2{color:var(--acc-ink);text-shadow:none} html[data-theme="light"] .winCard p{color:var(--t-ink2)} html[data-theme="light"] .winCard button{background:linear-gradient(90deg,#e8a13c,#d4566f);color:#fff} /* 水族馆控制面板 */ html[data-theme="light"] .lpanel{background:rgba(255,255,255,.9);border-color:var(--t-line)} html[data-theme="light"] .lpanel .lt{color:#5b6a63} html[data-theme="light"] .stepper{background:var(--t-soft2)} html[data-theme="light"] .stepper span{color:var(--t-ink2)} html[data-theme="light"] .dock{color:var(--t-ink3)} /* ============================================================ 6) 留言板 / 好物页 ============================================================ */ html[data-theme="light"] .wrap{color:var(--t-ink)} /* 表单卡 */ html[data-theme="light"] .form{background:var(--t-srf);border-color:var(--t-line)} html[data-theme="light"] .form h2{color:var(--acc-ink)} html[data-theme="light"] .form input,html[data-theme="light"] .form textarea, html[data-theme="light"] .reply-box textarea,html[data-theme="light"] .modal input{ background:var(--t-srf);border-color:var(--t-line);color:var(--t-ink)} html[data-theme="light"] .form input::placeholder,html[data-theme="light"] .form textarea::placeholder, html[data-theme="light"] .reply-box textarea::placeholder{color:#a3ada7} html[data-theme="light"] .form .hint{color:#7b8781} html[data-theme="light"] .form .cc{color:#5b6a63} html[data-theme="light"] #formMsg.ok,html[data-theme="light"] .modal .m-msg.ok{color:#1c8a53} html[data-theme="light"] #formMsg.err,html[data-theme="light"] .modal .m-msg.err{color:#b23a2b} /* 留言卡 */ html[data-theme="light"] #list .msg{background:var(--t-srf);border-color:var(--t-line); box-shadow:0 1px 3px rgba(35,45,40,.04)} html[data-theme="light"] .msg .who{color:var(--acc-ink)} html[data-theme="light"] .msg .who.adm{color:var(--t-head)} html[data-theme="light"] .msg .tag{color:var(--t-link);background:rgba(28,111,168,.10); border-color:rgba(28,111,168,.32)} html[data-theme="light"] .msg .tag.adm-tag{color:var(--t-head);background:rgba(150,105,12,.14); border-color:rgba(150,105,12,.4)} html[data-theme="light"] .msg .time{color:var(--t-ink3)} html[data-theme="light"] .msg .content{color:var(--t-ink)} html[data-theme="light"] .msg .reply{border-top-color:var(--t-line)} html[data-theme="light"] .msg .reply .r-top{color:var(--t-head)} html[data-theme="light"] .msg .reply .r-body{color:var(--t-ink2)} html[data-theme="light"] .rbtn,html[data-theme="light"] .mini{color:var(--acc-ink); border-color:var(--acc-bd);background:none} html[data-theme="light"] .rbtn:hover,html[data-theme="light"] .mini:hover{background:var(--acc-bg)} html[data-theme="light"] .dbtn{color:#b23a2b;border-color:rgba(178,58,43,.45);background:none} html[data-theme="light"] .dbtn:hover{background:rgba(178,58,43,.1)} html[data-theme="light"] .mini.ghost{color:#6c7b74;border-color:rgba(35,45,40,.2);background:none} html[data-theme="light"] .qchip{color:var(--acc-ink);background:var(--acc-bg);border-color:var(--acc-bd)} html[data-theme="light"] .qchip:hover{background:var(--acc-bg);filter:brightness(.95)} html[data-theme="light"] .more-btn{color:var(--t-ink2);background:var(--t-soft);border-color:var(--t-line)} html[data-theme="light"] .more-btn:hover{background:var(--t-soft2)} html[data-theme="light"] .empty{color:#7b8781;border-color:var(--t-line);background:none} html[data-theme="light"] .admin-login-btn{color:var(--acc-ink);background:var(--acc-bg);border-color:var(--acc-bd)} html[data-theme="light"] .adm-badge{color:var(--t-head);background:rgba(150,105,12,.14); border-color:rgba(150,105,12,.4)} html[data-theme="light"] .to-top{background:rgba(255,255,255,.92);border-color:var(--acc-bd);color:var(--acc-ink); box-shadow:0 4px 14px rgba(35,45,40,.14)} /* 管理员弹窗 */ html[data-theme="light"] .modal{background:var(--t-srf);border-color:var(--t-line); box-shadow:0 14px 40px rgba(35,45,40,.18)} html[data-theme="light"] .modal h3{color:var(--acc-ink)} html[data-theme="light"] .modal label{color:#5b6a63} html[data-theme="light"] .modal .m-cancel{background:var(--t-soft);color:var(--t-ink2);border-color:var(--t-line)} html[data-theme="light"] .modal-mask{background:rgba(35,45,40,.42)} /* 好物页 */ html[data-theme="light"] .sub{color:var(--t-ink3)} html[data-theme="light"] .note{color:#6b7a73} html[data-theme="light"] .goods-empty{color:#7b8781} /* ============================================================ 7) 广告位（侧栏 / 底部条） ============================================================ */ html[data-theme="light"] .ad-slot{background:var(--t-soft);border-color:var(--t-line)} html[data-theme="light"] .ad-slot:empty::after{color:#9aa59f} html[data-theme="light"] .ad-card{background:var(--t-srf);border-color:var(--t-line);color:var(--t-ink2)} html[data-theme="light"] .ad-card:hover{background:var(--t-srf);border-color:rgba(192,75,99,.4); box-shadow:0 4px 14px rgba(35,45,40,.10)} html[data-theme="light"] .ad-title{color:#3f4a44} html[data-theme="light"] .ad-coupon{color:var(--acc-ink);border-color:var(--acc-bd)} html[data-theme="light"] .ad-shop{color:#7c8880} html[data-theme="light"] .ad-bar{background:rgba(250,248,243,.96);border-top-color:var(--t-line)} html[data-theme="light"] .ad-bar-close{background:var(--t-soft2);color:#4f5d57} /* ============================================================ 8) 语言切换按钮（lang-switch.js 运行时注入，此处覆写浅色配色） ============================================================ */ html[data-theme="light"] .lang-switch{background:rgba(28,111,168,.12); border-color:rgba(28,111,168,.42);color:#125a86} html[data-theme="light"] .lang-switch:hover{background:rgba(28,111,168,.24);color:#0d4a6e} /* ============================================================ 9) 主题切换按钮（两种皮肤各一套配色） ============================================================ */ .theme-switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit; font-size:12.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap; border:1px solid rgba(255,255,255,.14);background:rgba(30,38,34,.8);color:#cfd6dd; padding:7px 13px;border-radius:20px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 3px 14px rgba(0,0,0,.26); transition:background .18s,color .18s,border-color .18s,transform .18s} .theme-switch:hover{transform:translateY(-1px)} .theme-switch .ts-ico{font-size:14px;line-height:1} /* 游戏页 HUD 里：与音效/说明按钮同款的圆形小按钮 */ .theme-switch.hud{width:34px;height:34px;padding:0;border-radius:50%;justify-content:center; border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#cdd6e0;box-shadow:none; backdrop-filter:none;-webkit-backdrop-filter:none} .theme-switch.hud .ts-txt{display:none} .theme-switch.hud:hover{background:rgba(255,255,255,.18);transform:none} /* 无页头页（首页、好物页）：固定在右上角 */ .theme-switch.corner{position:fixed;top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right));z-index:90} /* 页头里：与语言切换按钮同宽同高 */ .theme-switch.inline{flex:none} html[data-theme="light"] .theme-switch{background:rgba(255,255,255,.92);border-color:var(--t-line); color:#3f4a44;box-shadow:0 3px 14px rgba(35,45,40,.12)} html[data-theme="light"] .theme-switch:hover{background:#fff} html[data-theme="light"] .theme-switch.hud{background:var(--t-soft);border-color:var(--t-line);color:#4f5d57; box-shadow:none} html[data-theme="light"] .theme-switch.hud:hover{background:var(--t-soft2)} /* 主题菜单 */ .theme-menu{position:fixed;z-index:95;display:none;flex-direction:column;gap:2px;padding:6px; min-width:136px;border-radius:14px;border:1px solid rgba(255,255,255,.14); background:rgba(24,32,28,.97);box-shadow:0 10px 30px rgba(0,0,0,.35); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .theme-menu.show{display:flex} .theme-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit; font-size:13px;font-weight:600;padding:8px 11px;border-radius:9px;cursor:pointer; border:1px solid transparent;background:none;color:#b9c2cc} .theme-menu button:hover{background:rgba(255,255,255,.09);color:#fff} .theme-menu button .tm-ico{font-size:14px;width:17px;text-align:center;flex:none} .theme-menu button[aria-checked="true"]{background:rgba(255,217,102,.16);color:#ffd966; border-color:rgba(255,217,102,.4)} html[data-theme="light"] .theme-menu{background:rgba(255,255,255,.98);border-color:var(--t-line); box-shadow:0 10px 30px rgba(35,45,40,.18)} html[data-theme="light"] .theme-menu button{color:#4f5d57} html[data-theme="light"] .theme-menu button:hover{background:var(--t-soft);color:var(--t-ink)} html[data-theme="light"] .theme-menu button[aria-checked="true"]{background:rgba(150,105,12,.14); color:var(--t-head);border-color:var(--acc-bd)} /* 窄屏：只留图标，避免页头被挤到换行 */ @media (max-width:600px){ .theme-switch:not(.hud){width:32px;height:32px;padding:0;border-radius:50%;justify-content:center} .theme-switch:not(.hud) .ts-txt{display:none} .theme-switch.corner{width:38px;height:38px} }