/*
 * 网页新界面令牌：方案 D「Talky Glass · 液态玻璃」（之前是方案 F，变量名 --pf-* 沿用，App 侧同值）。
 * 设计稿：https://talky-ui.4ee.net/#set-d。近白冷底 + 背景彩色光斑 + 悬浮玻璃件，电光蓝主色，
 * 自己的气泡为青→蓝→紫竖向渐变。玻璃件：半透明白 + backdrop-filter blur(20px) + 顶部内高光 + 渐变高光描边。
 * 系统「降低透明度」（prefers-reduced-transparency）时玻璃改为实色。
 */
/* 字体 "Plus Jakarta Sans" 的 @font-face 在 Views/Home/Index.cshtml 的 <head> 里（带内容指纹的地址 + preload，提前下载、长期缓存）。 */

:root {
  --pf-bg: #F3F5FA; --pf-sf: #FFFFFF; --pf-sf2: #E9ECF4; --pf-sf3: #DDE2EE; --pf-pin: rgba(255,255,255,.7);
  --pf-fg: #0B0D14; --pf-fg2: #555C73; --pf-fg3: #949BAF; --pf-line: rgba(14,20,44,.075); --pf-line2: rgba(14,20,44,.13);
  --pf-pri: #2B6BFF; --pf-on-pri: #FFFFFF; --pf-pri-c: rgba(43,107,255,.12); --pf-on-pri-c: #1D5DF0;
  --pf-lem: #FFB020; --pf-lem-c: rgba(255,176,32,.15); --pf-on-lem: #8A5A00;
  --pf-cor: #FF6A55; --pf-cor-c: rgba(255,106,85,.12); --pf-on-cor: #C23A28;
  --pf-min: #1CC468; --pf-min-c: rgba(28,196,104,.12); --pf-on-min: #0E8A47;
  --pf-dan: #EE2F45; --pf-dan-c: rgba(238,47,69,.1); --pf-on-dan: #D01F35;
  --pf-mute: #9AA1B4; --pf-mute-fg: #FFFFFF;
  --pf-in: rgba(255,255,255,.9);
  --pf-out-a: #36A8FF; --pf-out-m: #3D6CFF; --pf-out-b: #5A4BFF;
  --pf-out: linear-gradient(160deg, var(--pf-out-a) 0%, var(--pf-out-m) 56%, var(--pf-out-b) 100%);
  --pf-out-fg: #FFFFFF; --pf-out-sub: rgba(255,255,255,.78);
  --pf-chat: #F3F5FA; --pf-pat: transparent;
  --pf-nc1: #E0533C; --pf-nc2: #0FA05A; --pf-nc3: #7A4DFF;
  --pf-hero: linear-gradient(160deg, #36A8FF, #3D6CFF 56%, #5A4BFF);
  --pf-scrim: rgba(226,231,244,.42);
  --pf-glass: rgba(255,255,255,.55); --pf-glass2: rgba(255,255,255,.76);
  --pf-glass-in: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
  --pf-glass-sh: 0 10px 26px -12px rgba(30,44,100,.32), 0 1px 3px rgba(30,44,100,.07);
  --pf-rim: linear-gradient(145deg, #FFFFFF, rgba(255,255,255,.4) 36%, rgba(255,255,255,.18) 62%, rgba(255,255,255,.9));
  --pf-sheen: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 52%);
  --pf-lens: rgba(255,255,255,.92); --pf-lens-sh: 0 3px 10px -3px rgba(30,44,100,.22), inset 0 0 0 .5px rgba(30,44,100,.06);
  --pf-blob-a: rgba(80,212,246,.55); --pf-blob-b: rgba(128,108,255,.42); --pf-blob-c: rgba(255,166,146,.5);
  --pf-chip-on: #0B0D14; --pf-chip-on-fg: #FFFFFF;
  --pf-vip: linear-gradient(135deg, #FFD36B, #F2A93B);
  --pf-vblue: #2B8CFF;
  --pf-sh1: 0 1px 1px rgba(20,30,70,.04), 0 6px 16px -8px rgba(20,30,70,.22);
  --pf-sh2: var(--pf-glass-sh);
  --pf-sh3: 0 22px 40px -14px rgba(30,44,100,.35);
  --pf-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --pf-display: "Plus Jakarta Sans", -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --pf-r-sm: 16px; --pf-r-md: 18px; --pf-r-fab: 31px; --pf-r-card: 20px; --pf-r-sheet: 32px; --pf-r-bubble: 21px; --pf-r-tail: 5px;
  --pf-spring: cubic-bezier(.2, 0, 0, 1);
  --pf-bounce: cubic-bezier(.34, 1.3, .64, 1);

  /* 旧变量对齐到新界面（浅色、默认强调色） */
  --primary: var(--pf-pri);
  --primary-soft: var(--pf-pri-c);
  --ink: var(--pf-fg);
  --muted: var(--pf-fg3);
  --muted-2: #B5BBCB;
  --surface: var(--pf-sf);
  --canvas: var(--pf-bg);
  --line: var(--pf-line);
  --success: var(--pf-min);
  --danger: var(--pf-dan);
  --warning: #E59A00;
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 18px;
}

html[data-theme="dark"] {
  --pf-bg: #000000; --pf-sf: #15161D; --pf-sf2: #1F2029; --pf-sf3: #2A2C38; --pf-pin: rgba(34,36,48,.55);
  --pf-fg: #F3F4F8; --pf-fg2: #A3A9BB; --pf-fg3: #676E82; --pf-line: rgba(255,255,255,.075); --pf-line2: rgba(255,255,255,.14);
  --pf-pri: #4A8BFF; --pf-on-pri: #FFFFFF; --pf-pri-c: rgba(74,139,255,.2); --pf-on-pri-c: #78A8FF;
  --pf-lem: #FFC14D; --pf-lem-c: rgba(255,193,77,.16); --pf-on-lem: #FFD27A;
  --pf-cor: #FF7A66; --pf-cor-c: rgba(255,122,102,.16); --pf-on-cor: #FFA294;
  --pf-min: #2BD67B; --pf-min-c: rgba(43,214,123,.16); --pf-on-min: #6FE6A6;
  --pf-dan: #FF4D5E; --pf-dan-c: rgba(255,77,94,.16); --pf-on-dan: #FF8592;
  --pf-mute: #4B5061; --pf-mute-fg: #D5D8E2;
  --pf-in: rgba(38,40,52,.9);
  --pf-out-a: #2C9CFF; --pf-out-m: #3A62FF; --pf-out-b: #5940F0;
  --pf-out-sub: rgba(255,255,255,.75);
  --pf-chat: #000000;
  --pf-nc1: #FF8A73; --pf-nc2: #4FE08F; --pf-nc3: #A48BFF;
  --pf-hero: linear-gradient(160deg, #2C9CFF, #3A62FF 56%, #5940F0);
  --pf-scrim: rgba(0,0,0,.5);
  --pf-glass: rgba(34,36,48,.52); --pf-glass2: rgba(44,46,60,.76);
  --pf-glass-in: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.04);
  --pf-glass-sh: 0 12px 30px -12px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.45);
  --pf-rim: linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 36%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.26));
  --pf-sheen: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 52%);
  --pf-lens: rgba(255,255,255,.15); --pf-lens-sh: inset 0 1px 0 rgba(255,255,255,.12);
  --pf-blob-a: rgba(0,168,222,.36); --pf-blob-b: rgba(102,70,255,.42); --pf-blob-c: rgba(255,92,110,.28);
  --pf-chip-on: #F3F4F8; --pf-chip-on-fg: #000000;
  --pf-vblue: #3E97FF;
  --pf-sh1: 0 6px 16px -8px rgba(0,0,0,.7);
  --pf-sh3: 0 22px 40px -14px rgba(0,0,0,.85);
  --primary: var(--pf-pri);
  --primary-soft: var(--pf-pri-c);
  --ink: var(--pf-fg);
  --text: var(--pf-fg);
  --muted: var(--pf-fg3);
  --muted-2: #4E5466;
  --surface: var(--pf-sf);
  --canvas: var(--pf-bg);
  --line: var(--pf-line);
  --ap-page: var(--pf-bg);
  --ap-surface-2: var(--pf-sf2);
  --ap-surface-3: var(--pf-sf3);
}

/* 用户在「外观 → 主题色」选了蓝色以外的颜色：F 的主色、气泡、个人卡跟着换（与 App paletteWithAccent 一致）。 */
html[data-accent]:not([data-accent="blue"]) {
  --pf-pri: var(--primary-accent, #5B5BF7);
}
html[data-accent="violet"] { --primary-accent: #7B4AEE; --pf-pri-c: #F2ECFF; }
html[data-accent="green"] { --primary-accent: #1E9E62; --pf-pri-c: #E6F6EE; }
html[data-accent="teal"] { --primary-accent: #0E9AA7; --pf-pri-c: #E3F6F7; }
html[data-accent="orange"] { --primary-accent: #E8730C; --pf-pri-c: #FFF1E3; }
html[data-accent="red"] { --primary-accent: #E5484D; --pf-pri-c: #FFECEE; }
html[data-accent="pink"] { --primary-accent: #D9468F; --pf-pri-c: #FDEAF3; }
html[data-accent="graphite"] { --primary-accent: #4B5368; --pf-pri-c: #ECEEF2; }
html[data-theme="dark"][data-accent="violet"] { --primary-accent: #A585FF; --pf-pri-c: #2E2548; }
html[data-theme="dark"][data-accent="green"] { --primary-accent: #4CD08E; --pf-pri-c: #173327; }
html[data-theme="dark"][data-accent="teal"] { --primary-accent: #3CCBD6; --pf-pri-c: #13302F; }
html[data-theme="dark"][data-accent="orange"] { --primary-accent: #FF9D4D; --pf-pri-c: #3A2814; }
html[data-theme="dark"][data-accent="red"] { --primary-accent: #FF6B72; --pf-pri-c: #3A1E22; }
html[data-theme="dark"][data-accent="pink"] { --primary-accent: #FF7AB8; --pf-pri-c: #3A1D2C; }
html[data-theme="dark"][data-accent="graphite"] { --primary-accent: #A3ABBE; --pf-pri-c: #262A33; }
html[data-accent]:not([data-accent="blue"]) {
  --pf-on-pri-c: color-mix(in srgb, var(--pf-pri) 70%, #000);
  --pf-out-a: color-mix(in srgb, var(--pf-pri) 85%, #fff);
  --pf-out-m: var(--pf-pri);
  --pf-out-b: color-mix(in srgb, var(--pf-pri) 82%, #000);
  --pf-hero: linear-gradient(135deg, color-mix(in srgb, var(--pf-pri) 96%, #fff), color-mix(in srgb, var(--pf-pri) 80%, #000));
  --pf-pin: var(--pf-glass2);
  --primary: var(--pf-pri);
  --primary-soft: var(--pf-pri-c);
  --ap-bubble-mine: var(--pf-pri);
}
html[data-theme="dark"][data-accent]:not([data-accent="blue"]) {
  --pf-on-pri-c: color-mix(in srgb, var(--pf-pri) 45%, #fff);
}

body {
  font-family: var(--pf-font);
  color: var(--pf-fg);
  background: var(--pf-bg);
}

/* 系统要求降低透明度时，玻璃改为实色。 */
@media (prefers-reduced-transparency: reduce) {
  :root { --pf-glass: rgba(255,255,255,.96); --pf-glass2: rgba(255,255,255,.98); }
  html[data-theme="dark"] { --pf-glass: rgba(34,36,48,.97); --pf-glass2: rgba(44,46,60,.98); }
}