/* 设计变量与全局重置。改配色、深浅色、强调色只需动这一个文件。 */
:root{
  color-scheme:light;
  /* 强调色由 html[data-accent] 覆盖，--p-rgb 用于派生透明色；--primary-x 是承载白字的最深档 */
  --primary:#07c160; --primary-d:#05a34f; --primary-x:#048a43; --primary-lt:#2fd487; --p-rgb:7,193,96;
  --primary-l:rgba(var(--p-rgb),.10); --primary-glow:rgba(var(--p-rgb),.30);
  --primary-tx:var(--primary-d);
  --bg:#f2f4f7; --panel:#fff; --glass:rgba(255,255,255,.88);
  --card:rgba(255,255,255,.97); --auth-bg:#0c1a13;
  --auth-g1:rgba(var(--p-rgb),.30); --auth-g2:rgba(var(--p-rgb),.22);
  --field:#fafbfc; --fill:#f2f4f7; --fill-2:#e8ebf0; --raise:#fff;
  --txt:#17181a; --txt-2:#4b5563; --sub:#5f6774; --mut:#69707d;
  --line:#eceef2; --line-2:#dfe3e9;
  --bub-in:#fff; --bub-base:var(--primary-x);
  --bub-hi:rgba(255,255,255,.06); --bub-lo:rgba(0,0,0,.20);
  --grad-out:linear-gradient(180deg,var(--bub-hi),var(--bub-lo)),var(--bub-base);
  --cta-bg:var(--primary-x); --cta-hi:rgba(255,255,255,.05); --cta-lo:rgba(0,0,0,.16);
  --grad-cta:linear-gradient(180deg,var(--cta-hi),var(--cta-lo)),var(--cta-bg);
  --danger:#fa5151; --danger-d:#cf3636; --danger-l:#ffecec; --danger-glow:rgba(250,81,81,.35);
  --warn-bg:#fdf6ec; --warn-tx:#8a6d3b; --warn-line:#f5e6c8;
  --mark-bg:#ffe08a; --mark-tx:#3d2f00;
  --online:#0cd06b; --thumb:#d5d9df;
  --veil-bg:#1b1f24; --veil-tx:#cfd6de; --veil-out-bg:#0e5f38; --veil-out-tx:#d8f5e6;
  --mask:rgba(15,20,25,.5); --toast-bg:rgba(23,26,30,.88); --toast-tx:#fff;
  --sh-sm:0 1px 2px rgba(16,24,40,.06);
  --sh-md:0 4px 16px rgba(16,24,40,.08);
  --sh-lg:0 16px 48px rgba(16,24,40,.16);
  --frame:rgba(16,24,40,.08);
  --app-w:1040px; --list-w:320px; --rail-w:0px;
  /* 语音消息配色：播放图标/声波/时长按收发方向各一套，明暗模式再分一套。
     --vi-mut 是加载中与失败态的置灰色，--vi-dot 是未听红点。
     气泡底色不另设变量：直接沿用 --bub-in / --grad-out，与文字气泡同一套外观。 */
  --vi-ic-in:#4b5563; --vi-wv-in:#6b7280; --vi-tx-in:#4b5563;
  --vi-ic-out:#fff; --vi-wv-out:#fff; --vi-tx-out:rgba(255,255,255,.9);
  --vi-mut:#c4c8cf; --vi-dot:#F53F3F;
  /* 播放中高亮：盖在原底色之上的一层蒙版。对方用强调色淡染（跟随主题色），
     己方用明暗压深一层，两种强调色下都不会脏。 */
  --vi-hl-in:var(--primary-l); --vi-hl-out:rgba(0,0,0,.10);
}
html[data-accent=blue]{--primary:#2f6fed;--primary-d:#1f56c8;--primary-x:#1a48ab;--primary-lt:#6ba3ff;--p-rgb:47,111,237}
html[data-accent=violet]{--primary:#7c5cff;--primary-d:#5f3ce0;--primary-x:#5132c2;--primary-lt:#a28cff;--p-rgb:124,92,255}
html[data-accent=rose]{--primary:#f0527f;--primary-d:#d23a63;--primary-x:#c23058;--primary-lt:#ff80a3;--p-rgb:240,82,127}
html[data-accent=cyan]{--primary:#0fb5c4;--primary-d:#0a8f9e;--primary-x:#087b87;--primary-lt:#4fd3de;--p-rgb:15,181,196}
/* 深色：只换表面与叠加层，强调色仍来自上面的 accent */
html[data-resolved=dark]{
  color-scheme:dark;
  --primary-l:rgba(var(--p-rgb),.18); --primary-glow:rgba(var(--p-rgb),.24);
  --primary-tx:var(--primary-lt);
  --bg:#0d1014; --panel:#161a20; --glass:rgba(22,26,32,.86);
  --card:rgba(23,27,33,.94); --auth-bg:#07090d;
  --auth-g1:rgba(var(--p-rgb),.22); --auth-g2:rgba(var(--p-rgb),.16);
  --field:#1b2028; --fill:#20262f; --fill-2:#28303b; --raise:#313a46;
  --txt:#e8ebf0; --txt-2:#b3bccb; --sub:#8992a2; --mut:#79828f;
  --line:#242b34; --line-2:#313a46;
  --bub-in:#1e242c; --bub-base:var(--primary-d);
  --bub-hi:rgba(255,255,255,.05); --bub-lo:rgba(0,0,0,.30);
  --cta-hi:rgba(255,255,255,.04); --cta-lo:rgba(0,0,0,.12);
  --danger:#ff6b6b; --danger-l:rgba(255,107,107,.15); --danger-glow:rgba(255,107,107,.28);
  --warn-bg:#33290f; --warn-tx:#e0bb6a; --warn-line:#4a3c18;
  --mark-bg:#6b5518; --mark-tx:#ffe9a8;
  --online:#22d37a; --thumb:#39424f;
  --veil-bg:#242b34; --veil-tx:#aab4c2;
  --mask:rgba(0,0,0,.66); --toast-bg:rgba(38,45,55,.92); --toast-tx:#f2f5f9;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 4px 16px rgba(0,0,0,.44);
  --sh-lg:0 16px 48px rgba(0,0,0,.6);
  --frame:rgba(0,0,0,.5);
  /* 深色下的语音配色：对方图标/声波提亮保证深底可读；
     己方不用规范里的 #212121——那是配 QQ 蓝底 #2B78E4 的，本项目主题是绿底，
     深灰字会糊成一片，改白色系（与浅色己方一致）保证对比度。 */
  --vi-ic-in:#D0D0D0; --vi-wv-in:#B8B8B8; --vi-tx-in:#D0D0D0;
  --vi-ic-out:#fff; --vi-wv-out:#fff; --vi-tx-out:rgba(255,255,255,.9);
  --vi-mut:#5a6068; --vi-dot:#F53F3F;
  /* 深色下播放高亮反向：对方提亮一层、己方覆白蒙层提亮 */
  --vi-hl-in:rgba(255,255,255,.07); --vi-hl-out:rgba(255,255,255,.12);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;color:var(--txt);background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
textarea,input{color-scheme:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
:focus:not(:focus-visible){outline:none}
::selection{background:var(--primary-l);color:var(--txt)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--line-2)}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}