/* ==========================================================================
   硅基办公 · 日夜模式（v0.1.80）
   ---------------------------------------------------------------------------
   夜 = 原来的样子，一个字都没改（默认就是这个）。
   日 = 把两个「颜色族」翻过来：
        · --wb-ink-rgb     全项目那些 rgba(255,255,255, X) 的墨色
                           （毛玻璃底、描边、次级文字全走它）
        · --wb-sheet-rgb   菜单 / 浮层那种实心面板的底色
   两个三元组一换，外壳（桌面 / 任务栏 / 开始菜单 / 窗口 / 驾驶舱）和所有 App 的
   毛玻璃组件会**一起**翻过去 —— 因为 v0.1.80 已经把全项目的写死色收进这两个
   token 里了，没有第二套配色。剩下少数几处「本来就该是深色」的地方
   （桌面背景、壁纸、驾驶舱的星空格栅）在这个文件里单独给一套日间值。

   想加第三套主题（比如「暖色」「高对比」）：照 day 这一段再写一份
   html[data-theme="xxx"]，然后在 desktop.js 的 THEME_LIST 里加一条。
   ========================================================================== */

/* ---------- 1. 日间：整套调色板 ---------- */
/* ---------- 0. 夜间（默认，一个字节都没改）：把两个颜色族写在这里 ----------
   全项目的毛玻璃 / 描边 / 白字都读这两个三元组；夜间的值 = 改造前写死的那些数，
   所以不带 data-theme（或 data-theme="night"）时，看到的还是原来那张深色脸。 */
:root {
  --wb-ink-rgb: 255, 255, 255;   /* 原来是 rgba(255, 255, 255, X) */
  --wb-sheet-rgb: 14, 26, 26;    /* 原来是 rgba(14, 26, 26, X)：菜单 / 浮层的实心底 */
}

html[data-theme="day"] {
  /* 墨色翻成深青灰：玻璃变「淡灰玻璃」、描边变淡灰线、白字变深字 */
  --wb-ink-rgb: 21, 41, 47;
  --wb-ink: #152a30;
  --wb-ink-90: rgba(21, 41, 47, .92);
  --wb-ink-75: rgba(21, 41, 47, .78);
  --wb-ink-60: rgba(21, 41, 47, .62);
  --wb-ink-45: rgba(21, 41, 47, .52);

  --wb-page: #eef2f1;
  --wb-glass: rgba(21, 41, 47, .05);
  --wb-glass-2: rgba(21, 41, 47, .08);
  --wb-glass-hover: rgba(21, 41, 47, .12);
  --wb-hairline: rgba(21, 41, 47, .13);
  --wb-shadow: 0 18px 40px rgba(20, 40, 45, .10), inset 0 1px 0 rgba(255, 255, 255, .7);
  --wb-shadow-lift: 0 24px 52px rgba(20, 40, 45, .14), inset 0 1px 0 rgba(255, 255, 255, .8);

  /* 实心面板（菜单 / 浮层 / 弹窗）：白天是「纸白」 */
  --wb-sheet-rgb: 250, 252, 251;

  /* 外壳自己那一套 */
  --dk-ink: #152a30;
  --dk-ink-90: rgba(21, 41, 47, .92);
  --dk-ink-75: rgba(21, 41, 47, .78);
  --dk-ink-60: rgba(21, 41, 47, .62);
  --dk-ink-45: rgba(21, 41, 47, .52);
  --dk-hair: rgba(21, 41, 47, .12);
  --dk-win-bg: rgba(250, 252, 251, .95);
  --dk-blur: blur(24px) saturate(170%);

  color-scheme: light;
}

/* 切主题时整块淡过去，不要「啪」一下换色（减少动态效果的电脑不淡） */
.dk, .dk-win, .dk-bar, .dk-start, .dk-nc, .dk-card { transition: background-color .28s var(--dk-ease), color .28s var(--dk-ease), box-shadow .28s var(--dk-ease); }

/* ---------- 2. 桌面：四张壁纸的日间版本 ---------- */
html[data-theme="day"] .dk { background: #dfe8e6; }
html[data-theme="day"] .dk__bg { background:
  radial-gradient(680px 420px at 18% 12%, rgba(150, 222, 206, .55), transparent 62%),
  radial-gradient(760px 520px at 76% 30%, rgba(255, 240, 202, .6), transparent 66%),
  radial-gradient(900px 620px at 52% 92%, rgba(148, 206, 168, .5), transparent 68%),
  linear-gradient(160deg, #d3e6e0 0%, #dfede1 32%, #f0f4dd 58%, #d9e7d6 100%); }
html[data-theme="day"] .dk__bg::before { background:
  linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 42%, rgba(255, 255, 255, .62) 100%); }
html[data-theme="day"] .dk__bg::after { background:
  radial-gradient(120% 80% at 50% 50%, transparent 46%, rgba(52, 84, 82, .18) 100%); }
html[data-theme="day"] .dk__grain { opacity: .16; }

html[data-theme="day"] .dk[data-wall="mist"] .dk__bg { background:
  radial-gradient(720px 460px at 24% 18%, rgba(206, 226, 236, .7), transparent 64%),
  radial-gradient(820px 560px at 78% 26%, rgba(240, 232, 218, .6), transparent 66%),
  radial-gradient(920px 640px at 50% 96%, rgba(176, 198, 206, .6), transparent 68%),
  linear-gradient(160deg, #dbe6ec 0%, #e6eeea 34%, #f2f3e6 60%, #dfe8e4 100%); }

/* 「夜色」在白天是一段清晨：淡蓝 → 暖白，不再是深蓝 */
html[data-theme="day"] .dk[data-wall="night"] .dk__bg { background:
  radial-gradient(700px 440px at 22% 16%, rgba(168, 196, 240, .6), transparent 62%),
  radial-gradient(780px 520px at 74% 32%, rgba(226, 208, 246, .5), transparent 66%),
  radial-gradient(900px 620px at 52% 94%, rgba(198, 214, 244, .6), transparent 68%),
  linear-gradient(160deg, #dde6f6 0%, #e7e9f5 34%, #f3eef2 62%, #e2e6f0 100%); }

/* 星空壁纸：白天是「黎明星空」—— 天光很亮，星点只剩一点点（见下一条） */
html[data-theme="day"] .dk[data-wall="star"] .dk__bg { background:
  radial-gradient(ellipse at bottom, #dcd6ef 0%, #f4f6f8 100%); }
html[data-theme="day"] .dk[data-wall="star"] .dk__bg::before { background: none; }
html[data-theme="day"] .dk-stars { opacity: .22; }
html[data-theme="day"] .dk[data-wall="star"] .dk__grain { opacity: .08; }

/* ---------- 3. 外壳：任务栏 / 开始菜单 / 搜索 / 通知 / 计算器日历 / 退出层 ---------- */
html[data-theme="day"] .dk-bar {
  background: rgba(250, 252, 251, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 -8px 22px rgba(30, 60, 60, .07);
}
html[data-theme="day"] .dk-start {
  background: rgba(250, 252, 251, .92);
  box-shadow: 0 26px 60px rgba(24, 52, 52, .2), inset 0 0 0 1px rgba(255, 255, 255, .8);
}
html[data-theme="day"] .dk-start::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(255, 255, 255, .55)); }
html[data-theme="day"] .dk-start__foot { background: rgba(21, 41, 47, .05); border-top-color: rgba(21, 41, 47, .1); }
html[data-theme="day"] .dk-calc,
html[data-theme="day"] .dk-cal { background: rgba(250, 252, 251, .95); box-shadow: 0 26px 60px rgba(24, 52, 52, .2), inset 0 0 0 1px rgba(255, 255, 255, .8); }
html[data-theme="day"] .dk-nc {
  background: rgba(250, 252, 251, .95);
  box-shadow: 0 -2px 40px rgba(24, 52, 52, .18), inset 0 0 0 1px rgba(255, 255, 255, .8);
}
html[data-theme="day"] .dk-banner {
  background: rgba(250, 252, 251, .97);
  box-shadow: 0 18px 40px rgba(24, 52, 52, .2), inset 0 0 0 1px rgba(255, 255, 255, .85);
}
html[data-theme="day"] .dk-search__box,
html[data-theme="day"] .dk[data-shell="hud"] .dk-search__box,
html[data-theme="day"] .dk[data-shell="hud"] .dk-search__box::after { background: rgba(250, 252, 251, .84); }
html[data-theme="day"] .dk-search__cb:checked ~ .dk-search__box { box-shadow: inset 0 0 0 1px rgba(21, 41, 47, .14), 0 10px 26px rgba(24, 52, 52, .16); }
html[data-theme="day"] .dk-so__mask { background: rgba(232, 240, 238, .62); }
html[data-theme="day"] .dk-so__card { background: rgba(250, 252, 251, .97); box-shadow: 0 30px 70px rgba(24, 52, 52, .22), inset 0 0 0 1px rgba(255, 255, 255, .8); }
html[data-theme="day"] .dk-so__box { background: rgba(250, 252, 251, .96); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-so__gate { background: rgba(240, 246, 248, .88); }

/* 开始菜单里的磁贴 / 图标：日间那圈毛玻璃描边改成淡灰，别在白底上消失 */
html[data-theme="day"] .dk-tl,
html[data-theme="day"] .dk-start__apps > button:hover { background: rgba(21, 41, 47, .05); }

/* ---------- 4. 星环驾驶舱：白天的「晴空驾驶舱」 ---------- */
html[data-theme="day"] .dk[data-shell="hud"] { --hud-cyan: #0b7f96; --hud-line: rgba(11, 127, 150, .32); }
html[data-theme="day"] .dk[data-shell="hud"] .dk__bg {
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(86, 190, 232, .42), transparent 62%),
    radial-gradient(900px 620px at 84% 110%, rgba(128, 132, 232, .24), transparent 64%),
    linear-gradient(180deg, #eaf4fb, #dcebf7 56%, #f3f8f8) !important;
}
html[data-theme="day"] .dk[data-shell="hud"] .dk__bg::before {
  background:
    linear-gradient(180deg, rgba(10, 130, 160, .5) 0 1.5px, transparent 1.5px),
    repeating-linear-gradient(90deg, rgba(12, 140, 170, .26) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(12, 140, 170, .22) 0 1px, transparent 1px 42px) !important;
}
html[data-theme="day"] .dk[data-shell="hud"] .dk__bg::after {
  background:
    conic-gradient(from 0deg, transparent 0 58%, rgba(12, 150, 180, .45) 74%, transparent 86%),
    conic-gradient(from 190deg, transparent 0 66%, rgba(122, 112, 220, .4) 82%, transparent 94%);
}
html[data-theme="day"] .dk[data-shell="hud"] .dk__grain {
  opacity: .32 !important;
  background-image: repeating-linear-gradient(0deg, rgba(20, 110, 140, .05) 0 1px, transparent 1px 3px);
}
html[data-theme="day"] .dk[data-shell="hud"] .dk__grain::before {
  background: radial-gradient(125% 95% at 50% 44%, transparent 52%, rgba(70, 110, 130, .16));
}
html[data-theme="day"] .dk[data-shell="hud"] .dk__grain::after { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .5), transparent); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-rail { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(240, 248, 250, .62)); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-rail__item { color: rgba(11, 100, 120, .76); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-rail__item::after {
  background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(232, 244, 247, .9));
  box-shadow: inset 0 0 0 1px rgba(11, 127, 150, .18);
}
html[data-theme="day"] .dk[data-shell="hud"] .dk-rail__item:hover::after,
html[data-theme="day"] .dk[data-shell="hud"] .dk-rail__item.is-on::after { background: linear-gradient(160deg, #ffffff, rgba(224, 242, 246, .96)); }
html[data-theme="day"] .dk-rail__tip { background: rgba(250, 252, 251, .97); box-shadow: 0 14px 30px rgba(24, 52, 52, .18), inset 0 0 0 1px rgba(255, 255, 255, .8); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-hud { background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(245, 252, 253, .62)); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-hud__brand i { color: rgba(15, 70, 88, .62); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-hud__kv b { color: #0b3b4a; }
html[data-theme="day"] .dk[data-shell="hud"] .dk-bar { background: linear-gradient(0deg, rgba(255, 255, 255, .88), rgba(245, 252, 253, .64)); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-win { background: rgba(250, 252, 251, .95); }
html[data-theme="day"] .dk[data-shell="hud"] .dk-win__bar { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(240, 246, 248, .5)); }

/* ---------- 5. 那颗钮：日 / 夜 ---------- */
.dk-dn {
  position: relative; flex: none; width: 52px; height: 26px; padding: 0; border: 0;
  border-radius: 999px; background: transparent; cursor: pointer;
  transition: transform .18s var(--dk-ease);
}
.dk-dn__track {
  position: absolute; inset: 0; border-radius: 999px; overflow: hidden; display: block;
  background: rgba(var(--wb-ink-rgb), .1);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .16), inset 0 2px 7px rgba(0, 0, 0, .18);
  transition: background .34s var(--dk-ease), box-shadow .34s var(--dk-ease);
}
.dk-dn__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(160deg, #7b86dd, #3a3f7c);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: transform .4s var(--dk-ease), background .4s var(--dk-ease), box-shadow .4s var(--dk-ease);
}
.dk-dn__ico { position: absolute; width: 12px; height: 12px; color: #fff; transition: opacity .26s var(--dk-ease), transform .4s var(--dk-ease); }
.dk-dn__ico--sun { opacity: 0; transform: rotate(-90deg); }
.dk-dn__ico--moon { opacity: 1; transform: rotate(0deg); }
.dk-dn__spark { position: absolute; left: 8px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #ffd77a; opacity: 0; }
.dk-dn:hover { transform: translateY(-1px); }
.dk-dn:hover .dk-dn__track { box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .26), inset 0 2px 7px rgba(0, 0, 0, .18); }
.dk-dn:active { transform: scale(.96); }
.dk-dn:focus-visible { outline: 2px solid rgba(110, 240, 255, .8); outline-offset: 2px; }
html[data-theme="day"] .dk-dn__track {
  background: linear-gradient(90deg, rgba(120, 186, 242, .34), rgba(255, 206, 116, .44));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 1px 5px rgba(120, 150, 180, .28);
}
html[data-theme="day"] .dk-dn__knob {
  transform: translateX(26px);
  background: linear-gradient(160deg, #ffe9b0, #f0a63c);
  box-shadow: 0 0 0 3px rgba(255, 196, 92, .22), 0 2px 8px rgba(176, 118, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .78);
}
html[data-theme="day"] .dk-dn__ico--sun { opacity: 1; transform: rotate(0deg); color: #7a4a05; }
html[data-theme="day"] .dk-dn__ico--moon { opacity: 0; transform: rotate(90deg); }
html[data-theme="day"] .dk-dn__spark { animation: dkDnSpark 4.4s linear infinite; }
.dk-dn__spark:nth-child(2) { animation-delay: 1.5s; }
.dk-dn__spark:nth-child(3) { animation-delay: 3s; }
@keyframes dkDnSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  18% { opacity: .95; }
  70% { opacity: .45; }
  100% { opacity: 0; transform: translate(38px, -7px) scale(.35); }
}
/* 驾驶舱那条顶栏只有 34px 高，这颗钮在那儿再收一档 */
.dk[data-shell="hud"] .dk-dn { width: 48px; height: 24px; }
.dk[data-shell="hud"] .dk-dn__knob { top: 3px; left: 3px; width: 18px; height: 18px; }
.dk[data-shell="hud"] .dk-dn__ico { width: 11px; height: 11px; }
html[data-theme="day"] .dk[data-shell="hud"] .dk-dn__knob { transform: translateX(24px); }
/* 驾驶舱里这颗钮在顶栏右侧、与读数并排，给它一点呼吸 */
/* 系统设置里那张卡的预览行：太阳 —— 钮 —— 月亮，一条线排开 */
.dk-dnrow {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 11px 13px;
  border-radius: 12px; background: rgba(var(--wb-ink-rgb), .05);
  box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .08);
}
.dk-dnrow__lab { display: inline-flex; align-items: center; gap: 5px; color: var(--dk-ink-60); }
.dk-dnrow__lab svg { width: 14px; height: 14px; }
.dk-dnrow__lab i { font-size: 11px; font-style: normal; }
.dk-dnrow__hint { margin-left: auto; font-size: 11px; color: var(--dk-ink-45); }
@media (max-width: 760px) { .dk-dnrow__hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="day"] .dk-dn__spark { animation: none; }
  .dk-dn, .dk-dn__knob, .dk-dn__ico, .dk-dn__track { transition: none; }
}
/* ---------- 6. 日间：那些「拿墨色当底、字写深色」的实心件要翻过来 ----------
   夜间它们的底是白、字是深绿（白底深字）；白天底变成深青灰，深字就糊在上面了。
   所以白天统一改成「深底浅字」，语义不变、对比度还在。 */
html[data-theme="day"] .wb-btn--primary,
html[data-theme="day"] .dk-btn--p,
html[data-theme="day"] .wb-btn--primary:hover,
html[data-theme="day"] .dk-btn--p:hover,
html[data-theme="day"] .wb-boardtabs button.is-active,
html[data-theme="day"] .wb-seg button.is-active,
html[data-theme="day"] .dk-seg button.is-on,
html[data-theme="day"] .wb-dimtabs button.is-active,
html[data-theme="day"] .wb-attr__item.is-active,
html[data-theme="day"] .wb-pub--go,
html[data-theme="day"] .wb-pub--go:hover,
html[data-theme="day"] .wb-im__tabs button.is-active,
html[data-theme="day"] .wb-test__msg--me p,
html[data-theme="day"] .wb-test__input button,
html[data-theme="day"] .wb-test__input button:hover,
html[data-theme="day"] .sites-cats .wb-chip.is-on {
  background: rgba(21, 41, 47, .94);
  color: #f3faf9;
}
html[data-theme="day"] .wb-btn--primary:hover,
html[data-theme="day"] .dk-btn--p:hover,
html[data-theme="day"] .wb-pub--go:hover,
html[data-theme="day"] .wb-test__input button:hover { background: #16292f; }
/* 带底色的按钮在白天要留住它自己的颜色，只把字提亮 */
html[data-theme="day"] .dk-win[data-app="board"] .wb-btn--primary { background: #2f9e86; color: #f4fbf8; }
html[data-theme="day"] .dk-win[data-app="board"] .wb-btn--primary:hover { background: #278a75; }

/* ---------- 7. 日间：微聊里那几张「纸」与深色小块，白就得是白 ----------
   文件预览里的稿纸 / 播放器 / 代码块本来就是「深底浅字」的实心件，
   不跟着主题翻，白天只把它们自己那点对比度补回来。 */
html[data-theme="day"] .wb-fpv__paper { background: #fbfdfc; color: #16302b; }
html[data-theme="day"] .wb-fpv__board b { background: rgba(255, 255, 255, .88); color: rgba(12, 26, 24, .82); }
html[data-theme="day"] .wb-fpv__play { background: rgba(255, 255, 255, .94); color: #10201d; }
html[data-theme="day"] .wb-fpv__srange { background: rgba(16, 121, 106, .13); color: #0d7265; }
html[data-theme="day"] .wb-fpv__ssum th,
html[data-theme="day"] .wb-fpv__ssum td { color: #0f6f61; }
html[data-theme="day"] .wb-fpv__text { color: rgba(255, 255, 255, .86); }
html[data-theme="day"] .wb-fpv__player .wb-fpv__time { color: rgba(255, 255, 255, .78); }
html[data-theme="day"] .wb-fpv__player .wb-fpv__pbar { background: rgba(255, 255, 255, .26); }
html[data-theme="day"] .wb-fpv__sheet td,
html[data-theme="day"] .wb-fpv__sheet th { color: rgba(21, 41, 47, .88); }
html[data-theme="day"] .wb-fpv__shotart i { color: rgba(255, 255, 255, .74); }

/* ---------- 8. 日间：本来就该是深色的「画面」，把夜间那套字色还给它 ----------
   项目管理那几张项目卡（深色渐变海报）、微聊文件预览里的合成图 / 播放器 ——
   它们的底是固定深色，不跟主题翻，所以块里的字也得跟着保持浅色；
   否则白字变深字、压在深底上，就成了「看不见」。 */
html[data-theme="day"] .wb-pgpanel,
html[data-theme="day"] .wb-fpv__shot,
html[data-theme="day"] .wb-fpv__player {
  --wb-ink-rgb: 255, 255, 255;
  --wb-ink: #ffffff;
  --wb-ink-90: rgba(255, 255, 255, .92);
  --wb-ink-75: rgba(255, 255, 255, .75);
  --wb-ink-60: rgba(255, 255, 255, .6);
  --wb-ink-45: rgba(255, 255, 255, .45);
  --dk-ink: #fff;
  --dk-ink-90: rgba(255, 255, 255, .92);
  --dk-ink-75: rgba(255, 255, 255, .75);
  --dk-ink-60: rgba(255, 255, 255, .6);
  --dk-ink-45: rgba(255, 255, 255, .45);
}
