/* ==========================================================================
   北辽 Web · Material 3 Expressive × Liquid Glass
   与 Android 客户端 2.0.0 同一套设计语言：oklch 动态取色 + 液态玻璃浮层。
   参考原型：北辽界面演示（Material 3 Expressive × Liquid Glass）
   ========================================================================== */

/* ------------------------------------------------------------------ 图标字体
   仅保留 FILL 轴的 Material Symbols Rounded 子集（28 KB，本地自托管，
   不依赖 Google Fonts / GitHub 等境外 CDN）。 */
/* 与安卓一致：拉丁/数字使用 App 内置字体（beichat_sans 的拉丁部分 = Plus Jakarta Sans），
   中文自动回退到系统字体——与应用里的字体回退链一致。子集化后每个仅 ~8KB。 */
@font-face{font-family:'Beichat Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/beichat-latin-regular.woff2?v=20261013f') format('woff2')}
@font-face{font-family:'Beichat Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/beichat-latin-medium.woff2?v=20261013f') format('woff2')}
@font-face{font-family:'Beichat Sans';font-style:normal;font-weight:600 700;font-display:swap;src:url('../fonts/beichat-latin-bold.woff2?v=20261013f') format('woff2')}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  /* 完整可变字体（含全部图标与连字）：PUA 码点与图标名（ligature）两种写法都可用 */
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-rounded.woff2?v=20261016') format('woff2');
}

/* =========================================================
   基础
   ========================================================= */
:root{ --h:262; --font:'Beichat Sans',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{min-height:100vh;font-family:var(--font);background:oklch(.955 .016 var(--h));color:oklch(.22 .02 var(--h));
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s}
button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,textarea,select{font-family:inherit}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;
  text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none;flex:none;transition:font-variation-settings .25s}
.ms.f{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* =========================================================
   页面外层
   ========================================================= */
.deco{position:fixed;pointer-events:none;z-index:0;transition:background-color .6s}
.deco1{width:760px;height:760px;right:-180px;top:50%;margin-top:-380px;background:oklch(.9 .055 var(--h));animation:spin 90s linear infinite}
.deco2{width:300px;height:300px;left:-80px;bottom:-90px;background:oklch(.91 .05 calc(var(--h) + 70));animation:spin 70s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.stage{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;gap:96px;padding:28px}
.intro{width:400px;flex:none}
.intro>*{animation:up .7s cubic-bezier(.2,.9,.3,1) both}
.intro>:nth-child(2){animation-delay:.05s}.intro>:nth-child(3){animation-delay:.1s}.intro>:nth-child(4){animation-delay:.15s}
.intro>:nth-child(5){animation-delay:.2s}.intro>:nth-child(6){animation-delay:.25s}.intro>:nth-child(7){animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.appicon{width:68px;height:68px;display:grid;place-items:center;background:oklch(.53 .17 var(--h));color:#fff;transition:background-color .5s}
.appicon .ms{font-size:36px}
.kick{display:inline-flex;align-items:center;gap:8px;margin-top:26px;height:32px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:600;
  background:oklch(.9 .045 var(--h));color:oklch(.32 .09 var(--h));transition:background-color .5s,color .5s}
.kick .ms{font-size:18px}
.ititle{margin:14px 0 0;font-size:84px;line-height:1;font-weight:900;letter-spacing:-.02em;font-family:'Noto Sans SC',var(--font)}
.isub{font-size:20px;font-weight:600;margin:14px 0 0;color:oklch(.53 .17 var(--h));transition:color .5s}
.idesc{font-size:14.5px;line-height:1.8;margin:14px 0 0;color:oklch(.42 .025 var(--h))}
.ilabel{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:oklch(.45 .03 var(--h));margin:26px 0 10px}
.tips{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.tips li{display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.6;color:oklch(.35 .025 var(--h));transition:background .2s}
.tips li:hover{background:oklch(.92 .03 var(--h))}
.tips .ms{font-size:20px;color:oklch(.53 .17 var(--h));margin-top:1px}
.ifoot{margin-top:18px;font-size:12px;color:oklch(.55 .02 var(--h))}

.phone{flex:none;position:relative;width:390px;height:min(840px,calc(100vh - 36px));min-height:640px;padding:10px;border-radius:52px;background:#0E0F12;
  box-shadow:0 0 0 1.5px #2A2C31,inset 0 0 0 1px #3A3D44,0 50px 90px -30px oklch(.3 .08 var(--h) / .55),0 18px 36px -18px oklch(.3 .06 var(--h) / .4);
  animation:up .9s cubic-bezier(.2,.9,.3,1) .1s both}
@media(max-width:1060px){.intro{display:none}.deco1{right:50%;margin-right:-380px}}
@media(max-width:520px){
  .stage{padding:0}.deco{display:none}
  .phone{width:100vw;height:100vh;height:100dvh;min-height:0;padding:0;border-radius:0;box-shadow:none}
  .screen{border-radius:0!important}
}

/* =========================================================
   屏幕 · Material 3 动态色板（基于种子色相 --h）
   ========================================================= */
.screen{
  --p:oklch(.53 .17 var(--h)); --on-p:#fff;
  --pc:oklch(.91 .065 var(--h)); --on-pc:oklch(.3 .1 var(--h));
  --sc:oklch(.925 .035 var(--h)); --on-sc:oklch(.3 .045 var(--h));
  --t:oklch(.56 .13 calc(var(--h) + 70)); --tc:oklch(.91 .06 calc(var(--h) + 70)); --on-tc:oklch(.32 .09 calc(var(--h) + 70));
  --s:oklch(.982 .007 var(--h)); --card:#fff; --bin:#fff;
  --s1:oklch(.968 .01 var(--h)); --s2:oklch(.952 .013 var(--h)); --s3:oklch(.935 .015 var(--h)); --s4:oklch(.915 .017 var(--h));
  --on-s:oklch(.21 .02 var(--h)); --on-sv:oklch(.46 .025 var(--h)); --ol:oklch(.87 .015 var(--h));
  --inv:oklch(.29 .015 var(--h)); --on-inv:oklch(.95 .01 var(--h)); --err:oklch(.56 .2 27); --ok:oklch(.68 .17 150);
  --ga:.2; --gb:16px; --edge:rgba(255,255,255,.14); --lens:rgba(255,255,255,.16); --sheen:rgba(255,255,255,.14);
  --glass:oklch(.985 .01 var(--h) / var(--ga));
  --rim:rgba(255,255,255,.85); --rim2:rgba(255,255,255,.3);
  --gsh:0 8px 22px -10px rgba(20,28,50,.24),0 1px 2px rgba(20,28,50,.07);
  position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:var(--s);color:var(--on-s);font-size:14px;
}
.screen.dark{
  --p:oklch(.8 .12 var(--h)); --on-p:oklch(.25 .08 var(--h));
  --pc:oklch(.37 .09 var(--h)); --on-pc:oklch(.92 .05 var(--h));
  --sc:oklch(.34 .035 var(--h)); --on-sc:oklch(.9 .03 var(--h));
  --t:oklch(.8 .1 calc(var(--h) + 70)); --tc:oklch(.38 .08 calc(var(--h) + 70)); --on-tc:oklch(.92 .05 calc(var(--h) + 70));
  --s:oklch(.165 .01 var(--h)); --card:oklch(.215 .013 var(--h)); --bin:oklch(.27 .015 var(--h));
  --s1:oklch(.2 .012 var(--h)); --s2:oklch(.225 .013 var(--h)); --s3:oklch(.255 .014 var(--h)); --s4:oklch(.29 .015 var(--h));
  --on-s:oklch(.93 .01 var(--h)); --on-sv:oklch(.76 .02 var(--h)); --ol:oklch(.34 .015 var(--h));
  --inv:oklch(.92 .01 var(--h)); --on-inv:oklch(.22 .02 var(--h)); --err:oklch(.72 .16 25);
  --glass:oklch(.3 .016 var(--h) / var(--ga));
  --rim:rgba(255,255,255,.4); --rim2:rgba(255,255,255,.07); --edge:rgba(255,255,255,.07); --lens:rgba(255,255,255,.05); --sheen:rgba(255,255,255,.05);
  --gsh:0 8px 22px -10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.3);
}
.screen[data-glass="clear"]{--ga:.1;--gb:10px}
.screen[data-glass="solid"]{--ga:.94;--gb:0px}
.screen *{transition-property:background-color,color,border-color;transition-duration:.35s}
html.booting *,html.booting *::before,html.booting *::after{transition:none!important;animation:none!important}

/* ---------- 液态玻璃材质 ----------
   去塑料感：低着色 + 适度模糊/饱和 + 左上定向镜面高光 + 内缘折射带（无整块顶部亮斑） */
.glass{position:relative;isolation:isolate;background:var(--glass);
  -webkit-backdrop-filter:blur(var(--gb)) saturate(1.4);backdrop-filter:blur(var(--gb)) saturate(1.4);
  box-shadow:var(--gsh),
    inset 1.5px 1.5px 1px -1px var(--rim),
    inset -1px -1px 1px -1px var(--rim2),
    inset 0 0 0 1px var(--edge),
    inset 0 0 16px 2px var(--lens)}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(135deg,var(--rim) 0%,transparent 22%,transparent 62%,var(--rim2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(135deg,var(--sheen),transparent 34%)}
.glass.dense{--ga:.4}
.screen[data-glass="clear"] .glass.dense{--ga:.30}
.screen[data-glass="solid"] .glass.dense{--ga:.96}

.homebar{position:absolute;left:50%;bottom:7px;width:112px;height:4.5px;margin-left:-56px;border-radius:4px;background:var(--on-s);opacity:.32;z-index:97;pointer-events:none}
.screen.calling .homebar{background:#fff;opacity:.6}

/* =========================================================
   视图
   ========================================================= */
.views{position:absolute;inset:0}
.view{position:absolute;inset:0;padding-top:0;display:flex;flex-direction:column;background:var(--s);
  opacity:0;pointer-events:none;transform:scale(.985);transition:opacity .22s ease,transform .32s cubic-bezier(.2,.9,.3,1)}
.view.on{opacity:1;pointer-events:auto;transform:none}
.view--chat{padding:0;z-index:40;opacity:1;transform:translateX(104%);transition:transform .42s cubic-bezier(.25,.9,.25,1);box-shadow:-20px 0 40px rgba(0,0,0,.12)}
.view--chat.on{transform:none}
.view--auth{z-index:60;padding:0;opacity:0;visibility:hidden;transform:none;pointer-events:none;background:transparent}
.view--auth.on{opacity:1;visibility:visible;pointer-events:auto}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:124px;
  -webkit-mask-image:linear-gradient(transparent 0,#000 14px);mask-image:linear-gradient(transparent 0,#000 14px)}
.scroll::-webkit-scrollbar{display:none}
.vhead{flex:none;padding:6px 0 4px}
.lt{display:flex;align-items:center;gap:4px;padding:6px 10px 6px 22px;min-height:56px}
.lt h1{flex:1;margin:0;font-size:30px;font-weight:800;letter-spacing:-.01em;font-family:'Noto Sans SC',var(--font)}
.ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--on-sv);flex:none;transition:background-color .15s,transform .2s cubic-bezier(.3,1.5,.5,1)}
.ib.avbtn{width:36px;height:36px;margin-right:2px;overflow:hidden}
.ib.avbtn .avw{width:100%!important;height:100%!important}
.ib.avbtn .avw .av{width:100%;height:100%;font-size:14px!important;border-radius:50%}
.ib:hover{background:var(--s3);color:var(--on-s)}
.ib:active{transform:scale(.88)}
.ib:disabled{opacity:.4}

/* 搜索栏 (M3 search bar) */
.searchbar{display:flex;align-items:center;gap:12px;height:56px;margin:4px 14px 0;padding:0 8px 0 18px;border-radius:28px;background:var(--s3);color:var(--on-sv)}
.searchbar:focus-within{background:var(--s4)}
.searchbar input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;color:var(--on-s)}
.searchbar input::placeholder{color:var(--on-sv)}
.searchbar.sm{height:48px;margin-top:0}

/* 筛选 chips */
.chips{display:flex;gap:8px;padding:12px 14px 6px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 14px;border-radius:10px;border:1px solid var(--ol);font-size:13.5px;font-weight:600;
  color:var(--on-sv);flex:none;transition:background-color .2s,border-color .2s,color .2s,padding .25s}
.chip .ck{font-size:18px;width:0;overflow:hidden;margin-left:-4px;transition:width .25s cubic-bezier(.3,1.4,.5,1),margin .25s}
.chip.on{background:var(--sc);border-color:var(--sc);color:var(--on-sc);padding-left:9px}
.chip.on .ck{width:18px;margin-left:0}
.chip .n{font-size:11.5px;font-weight:700;color:var(--p);font-variant-numeric:tabular-nums}

/* 头像 */
.avw{position:relative;display:inline-block;flex:none}
.av{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:50%;font-weight:700;
  background:oklch(.87 .075 var(--ah));color:oklch(.34 .1 var(--ah));font-family:'Noto Sans SC',var(--font)}
.screen.dark .av{background:oklch(.42 .09 var(--ah));color:oklch(.93 .05 var(--ah))}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.av .ini{line-height:1}
.av .ms{font-size:1.3em}
.av[class*="shp-"]{border-radius:0}
/* ---------- M3 Expressive 形状（与安卓 ui/design/Shapes.kt 同一套参数） ----------
   Android: wavy(n, amp) 与 Squircle；此处用 clip-path: polygon 等价实现。 */
.shp-cookie9{clip-path:polygon(50.000% 0.000%,52.597% 0.449%,55.076% 1.709%,57.360% 3.532%,59.443% 5.574%,61.395% 7.475%,63.341% 8.942%,65.425% 9.816%,67.762% 10.107%,70.389% 9.984%,73.250% 9.730%,76.191% 9.669%,78.996% 10.090%,81.439% 11.176%,83.342% 12.970%,84.630% 15.370%,85.360% 18.162%,85.712% 21.081%,85.955% 23.877%,86.383% 26.373%,87.239% 28.500%,88.653% 30.305%,90.600% 31.924%,92.900% 33.532%,95.253% 35.296%,97.306% 37.324%,98.740% 39.640%,99.342% 42.185%,99.061% 44.843%,98.023% 47.483%,96.500% 50.000%,94.849% 52.350%,93.429% 54.565%,92.513% 56.733%,92.228% 58.976%,92.525% 61.395%,93.196% 64.035%,93.923% 66.860%,94.359% 69.750%,94.210% 72.526%,93.301% 75.000%,91.614% 77.024%,89.284% 78.541%,86.563% 79.608%,83.752% 80.391%,81.130% 81.130%,78.887% 82.083%,77.088% 83.451%,75.668% 85.329%,74.460% 87.666%,73.250% 90.270%,71.832% 92.848%,70.065% 95.067%,67.903% 96.639%,65.398% 97.390%,62.676% 97.306%,59.893% 96.542%,57.189% 95.387%,54.646% 94.199%,52.270% 93.322%,50.000% 93.000%,47.730% 93.322%,45.354% 94.199%,42.811% 95.387%,40.107% 96.542%,37.324% 97.306%,34.602% 97.390%,32.097% 96.639%,29.935% 95.067%,28.168% 92.848%,26.750% 90.270%,25.540% 87.666%,24.332% 85.329%,22.912% 83.451%,21.113% 82.083%,18.870% 81.130%,16.248% 80.391%,13.437% 79.608%,10.716% 78.541%,8.386% 77.024%,6.699% 75.000%,5.790% 72.526%,5.641% 69.750%,6.077% 66.860%,6.804% 64.035%,7.475% 61.395%,7.772% 58.976%,7.487% 56.733%,6.571% 54.565%,5.151% 52.350%,3.500% 50.000%,1.977% 47.483%,0.939% 44.843%,0.658% 42.185%,1.260% 39.640%,2.694% 37.324%,4.747% 35.296%,7.100% 33.532%,9.400% 31.924%,11.347% 30.305%,12.761% 28.500%,13.617% 26.373%,14.045% 23.877%,14.288% 21.081%,14.640% 18.162%,15.370% 15.370%,16.658% 12.970%,18.561% 11.176%,21.004% 10.090%,23.809% 9.669%,26.750% 9.730%,29.611% 9.984%,32.238% 10.107%,34.575% 9.816%,36.659% 8.942%,38.605% 7.475%,40.557% 5.574%,42.640% 3.532%,44.924% 1.709%,47.403% 0.449%)}
.shp-cookie12{clip-path:polygon(50.000% 0.000%,52.589% 0.593%,55.028% 2.164%,57.259% 4.171%,59.361% 5.959%,61.517% 7.016%,63.914% 7.178%,66.628% 6.682%,69.564% 6.059%,72.461% 5.918%,75.000% 6.699%,76.946% 8.507%,78.272% 11.086%,79.201% 13.940%,80.128% 16.540%,81.466% 18.534%,83.460% 19.872%,86.060% 20.799%,88.914% 21.728%,91.493% 23.054%,93.301% 25.000%,94.082% 27.539%,93.941% 30.436%,93.318% 33.372%,92.822% 36.086%,92.984% 38.483%,94.041% 40.639%,95.829% 42.741%,97.836% 44.972%,99.407% 47.411%,100.000% 50.000%,99.407% 52.589%,97.836% 55.028%,95.829% 57.259%,94.041% 59.361%,92.984% 61.517%,92.822% 63.914%,93.318% 66.628%,93.941% 69.564%,94.082% 72.461%,93.301% 75.000%,91.493% 76.946%,88.914% 78.272%,86.060% 79.201%,83.460% 80.128%,81.466% 81.466%,80.128% 83.460%,79.201% 86.060%,78.272% 88.914%,76.946% 91.493%,75.000% 93.301%,72.461% 94.082%,69.564% 93.941%,66.628% 93.318%,63.914% 92.822%,61.517% 92.984%,59.361% 94.041%,57.259% 95.829%,55.028% 97.836%,52.589% 99.407%,50.000% 100.000%,47.411% 99.407%,44.972% 97.836%,42.741% 95.829%,40.639% 94.041%,38.483% 92.984%,36.086% 92.822%,33.372% 93.318%,30.436% 93.941%,27.539% 94.082%,25.000% 93.301%,23.054% 91.493%,21.728% 88.914%,20.799% 86.060%,19.872% 83.460%,18.534% 81.466%,16.540% 80.128%,13.940% 79.201%,11.086% 78.272%,8.507% 76.946%,6.699% 75.000%,5.918% 72.461%,6.059% 69.564%,6.682% 66.628%,7.178% 63.914%,7.016% 61.517%,5.959% 59.361%,4.171% 57.259%,2.164% 55.028%,0.593% 52.589%,0.000% 50.000%,0.593% 47.411%,2.164% 44.972%,4.171% 42.741%,5.959% 40.639%,7.016% 38.483%,7.178% 36.086%,6.682% 33.372%,6.059% 30.436%,5.918% 27.539%,6.699% 25.000%,8.507% 23.054%,11.086% 21.728%,13.940% 20.799%,16.540% 19.872%,18.534% 18.534%,19.872% 16.540%,20.799% 13.940%,21.728% 11.086%,23.054% 8.507%,25.000% 6.699%,27.539% 5.918%,30.436% 6.059%,33.372% 6.682%,36.086% 7.178%,38.483% 7.016%,40.639% 5.959%,42.741% 4.171%,44.972% 2.164%,47.411% 0.593%)}
.shp-clover{clip-path:polygon(50.000% 0.000%,52.608% 0.243%,55.154% 0.962%,57.583% 2.125%,59.845% 3.682%,61.906% 5.567%,63.743% 7.704%,65.351% 10.009%,66.743% 12.395%,67.945% 14.780%,69.000% 17.091%,69.959% 19.265%,70.883% 21.257%,71.832% 23.040%,72.867% 24.603%,74.042% 25.958%,75.397% 27.133%,76.960% 28.168%,78.743% 29.117%,80.735% 30.041%,82.909% 31.000%,85.220% 32.055%,87.605% 33.257%,89.991% 34.649%,92.296% 36.257%,94.433% 38.094%,96.318% 40.155%,97.875% 42.417%,99.038% 44.846%,99.757% 47.392%,100.000% 50.000%,99.757% 52.608%,99.038% 55.154%,97.875% 57.583%,96.318% 59.845%,94.433% 61.906%,92.296% 63.743%,89.991% 65.351%,87.605% 66.743%,85.220% 67.945%,82.909% 69.000%,80.735% 69.959%,78.743% 70.883%,76.960% 71.832%,75.397% 72.867%,74.042% 74.042%,72.867% 75.397%,71.832% 76.960%,70.883% 78.743%,69.959% 80.735%,69.000% 82.909%,67.945% 85.220%,66.743% 87.605%,65.351% 89.991%,63.743% 92.296%,61.906% 94.433%,59.845% 96.318%,57.583% 97.875%,55.154% 99.038%,52.608% 99.757%,50.000% 100.000%,47.392% 99.757%,44.846% 99.038%,42.417% 97.875%,40.155% 96.318%,38.094% 94.433%,36.257% 92.296%,34.649% 89.991%,33.257% 87.605%,32.055% 85.220%,31.000% 82.909%,30.041% 80.735%,29.117% 78.743%,28.168% 76.960%,27.133% 75.397%,25.958% 74.042%,24.603% 72.867%,23.040% 71.832%,21.257% 70.883%,19.265% 69.959%,17.091% 69.000%,14.780% 67.945%,12.395% 66.743%,10.009% 65.351%,7.704% 63.743%,5.567% 61.906%,3.682% 59.845%,2.125% 57.583%,0.962% 55.154%,0.243% 52.608%,0.000% 50.000%,0.243% 47.392%,0.962% 44.846%,2.125% 42.417%,3.682% 40.155%,5.567% 38.094%,7.704% 36.257%,10.009% 34.649%,12.395% 33.257%,14.780% 32.055%,17.091% 31.000%,19.265% 30.041%,21.257% 29.117%,23.040% 28.168%,24.603% 27.133%,25.958% 25.958%,27.133% 24.603%,28.168% 23.040%,29.117% 21.257%,30.041% 19.265%,31.000% 17.091%,32.055% 14.780%,33.257% 12.395%,34.649% 10.009%,36.257% 7.704%,38.094% 5.567%,40.155% 3.682%,42.417% 2.125%,44.846% 0.962%,47.392% 0.243%)}
.shp-burst{clip-path:polygon(50.000% 0.000%,52.594% 0.500%,55.053% 1.919%,57.281% 4.028%,59.247% 6.495%,61.000% 8.948%,62.656% 11.050%,64.374% 12.555%,66.314% 13.358%,68.593% 13.509%,71.250% 13.194%,74.224% 12.698%,77.359% 12.344%,80.425% 12.428%,83.167% 13.164%,85.355% 14.645%,86.836% 16.833%,87.572% 19.575%,87.656% 22.641%,87.302% 25.776%,86.806% 28.750%,86.491% 31.407%,86.642% 33.686%,87.445% 35.626%,88.950% 37.344%,91.052% 39.000%,93.505% 40.753%,95.972% 42.719%,98.081% 44.947%,99.500% 47.406%,100.000% 50.000%,99.500% 52.594%,98.081% 55.053%,95.972% 57.281%,93.505% 59.247%,91.052% 61.000%,88.950% 62.656%,87.445% 64.374%,86.642% 66.314%,86.491% 68.593%,86.806% 71.250%,87.302% 74.224%,87.656% 77.359%,87.572% 80.425%,86.836% 83.167%,85.355% 85.355%,83.167% 86.836%,80.425% 87.572%,77.359% 87.656%,74.224% 87.302%,71.250% 86.806%,68.593% 86.491%,66.314% 86.642%,64.374% 87.445%,62.656% 88.950%,61.000% 91.052%,59.247% 93.505%,57.281% 95.972%,55.053% 98.081%,52.594% 99.500%,50.000% 100.000%,47.406% 99.500%,44.947% 98.081%,42.719% 95.972%,40.753% 93.505%,39.000% 91.052%,37.344% 88.950%,35.626% 87.445%,33.686% 86.642%,31.407% 86.491%,28.750% 86.806%,25.776% 87.302%,22.641% 87.656%,19.575% 87.572%,16.833% 86.836%,14.645% 85.355%,13.164% 83.167%,12.428% 80.425%,12.344% 77.359%,12.698% 74.224%,13.194% 71.250%,13.509% 68.593%,13.358% 66.314%,12.555% 64.374%,11.050% 62.656%,8.948% 61.000%,6.495% 59.247%,4.028% 57.281%,1.919% 55.053%,0.500% 52.594%,0.000% 50.000%,0.500% 47.406%,1.919% 44.947%,4.028% 42.719%,6.495% 40.753%,8.948% 39.000%,11.050% 37.344%,12.555% 35.626%,13.358% 33.686%,13.509% 31.407%,13.194% 28.750%,12.698% 25.776%,12.344% 22.641%,12.428% 19.575%,13.164% 16.833%,14.645% 14.645%,16.833% 13.164%,19.575% 12.428%,22.641% 12.344%,25.776% 12.698%,28.750% 13.194%,31.407% 13.509%,33.686% 13.358%,35.626% 12.555%,37.344% 11.050%,39.000% 8.948%,40.753% 6.495%,42.719% 4.028%,44.947% 1.919%,47.406% 0.500%)}
.shp-squircle{clip-path:polygon(100.000% 50.000%,99.966% 61.439%,99.863% 66.165%,99.691% 69.776%,99.451% 72.799%,99.141% 75.437%,98.761% 77.795%,98.311% 79.932%,97.790% 81.888%,97.197% 83.689%,96.530% 85.355%,95.789% 86.900%,94.973% 88.334%,94.078% 89.665%,93.103% 90.900%,92.045% 92.045%,90.900% 93.103%,89.665% 94.078%,88.334% 94.973%,86.900% 95.789%,85.355% 96.530%,83.689% 97.197%,81.888% 97.790%,79.932% 98.311%,77.795% 98.761%,75.437% 99.141%,72.799% 99.451%,69.776% 99.691%,66.165% 99.863%,61.439% 99.966%,50.000% 100.000%,38.561% 99.966%,33.835% 99.863%,30.224% 99.691%,27.201% 99.451%,24.563% 99.141%,22.205% 98.761%,20.068% 98.311%,18.112% 97.790%,16.311% 97.197%,14.645% 96.530%,13.100% 95.789%,11.666% 94.973%,10.335% 94.078%,9.100% 93.103%,7.955% 92.045%,6.897% 90.900%,5.922% 89.665%,5.027% 88.334%,4.211% 86.900%,3.470% 85.355%,2.803% 83.689%,2.210% 81.888%,1.689% 79.932%,1.239% 77.795%,0.859% 75.437%,0.549% 72.799%,0.309% 69.776%,0.137% 66.165%,0.034% 61.439%,0.000% 50.000%,0.034% 38.561%,0.137% 33.835%,0.309% 30.224%,0.549% 27.201%,0.859% 24.563%,1.239% 22.205%,1.689% 20.068%,2.210% 18.112%,2.803% 16.311%,3.470% 14.645%,4.211% 13.100%,5.027% 11.666%,5.922% 10.335%,6.897% 9.100%,7.955% 7.955%,9.100% 6.897%,10.335% 5.922%,11.666% 5.027%,13.100% 4.211%,14.645% 3.470%,16.311% 2.803%,18.112% 2.210%,20.068% 1.689%,22.205% 1.239%,24.563% 0.859%,27.201% 0.549%,30.224% 0.309%,33.835% 0.137%,38.561% 0.034%,50.000% 0.000%,61.439% 0.034%,66.165% 0.137%,69.776% 0.309%,72.799% 0.549%,75.437% 0.859%,77.795% 1.239%,79.932% 1.689%,81.888% 2.210%,83.689% 2.803%,85.355% 3.470%,86.900% 4.211%,88.334% 5.027%,89.665% 5.922%,90.900% 6.897%,92.045% 7.955%,93.103% 9.100%,94.078% 10.335%,94.973% 11.666%,95.789% 13.100%,96.530% 14.645%,97.197% 16.311%,97.790% 18.112%,98.311% 20.068%,98.761% 22.205%,99.141% 24.563%,99.451% 27.201%,99.691% 30.224%,99.863% 33.835%,99.966% 38.561%)}

.dot{position:absolute;right:0;bottom:0;width:26%;height:26%;min-width:11px;min-height:11px;border-radius:50%;background:var(--ok);border:2.5px solid var(--card)}

/* =========================================================
   消息页
   ========================================================= */
.grp-l{display:flex;align-items:center;gap:6px;padding:8px 26px 8px;font-size:12.5px;font-weight:700;color:var(--on-sv)}
.grp-l .ms{font-size:16px}
.grp-l .sp{flex:1}
.card-list{margin:0 12px 12px;background:var(--card);border-radius:28px;overflow:hidden;padding:4px 0}
.conv{display:flex;align-items:center;gap:14px;padding:10px 16px;cursor:pointer;position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:background-color .15s;animation:rowin .45s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.conv:hover{background:var(--s1)}
.conv:active{background:var(--s3)}
.cm{flex:1;min-width:0}
.r1,.r2{display:flex;align-items:center;gap:6px}
.r2{margin-top:3px}
.nm{flex:1;min-width:0;display:flex;align-items:center;gap:5px;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden}
.nm>span{overflow:hidden;text-overflow:ellipsis}
.nm .vf{font-size:16px;color:var(--p);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
.tm{font-size:12px;color:var(--on-sv);flex:none;font-variant-numeric:tabular-nums}
.conv.unread .tm{color:var(--p);font-weight:700}
.conv.unread .nm{font-weight:800}
.pv{flex:1;min-width:0;font-size:14px;color:var(--on-sv);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.unread .pv{color:var(--on-s)}
.pv .hl{color:var(--err);font-weight:600}
.pv .ty{color:var(--p);font-weight:600}
.mi2{font-size:17px;color:var(--on-sv);opacity:.75}
.bd{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--p);color:var(--on-p);font-size:11.5px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums;flex:none}
.bd.mute{background:var(--s4);color:var(--on-sv)}
.bd[hidden]{display:none}
.bd.pop{animation:pop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.listfoot{text-align:center;font-size:12px;color:var(--on-sv);padding:10px 24px 0;line-height:1.8;opacity:.8}
.empty{padding:56px 24px;text-align:center;color:var(--on-sv);font-size:14px;line-height:1.8}
.empty .ms{font-size:40px;opacity:.5;display:block;margin:0 auto 8px}

/* =========================================================
   液态玻璃 底部导航 + M3 FAB
   ========================================================= */
.tabbar{position:absolute;left:12px;right:88px;bottom:26px;height:64px;border-radius:32px;z-index:50;display:flex;padding:4px;
  transition:right .5s cubic-bezier(.3,1.15,.4,1),transform .45s cubic-bezier(.3,1,.4,1),opacity .3s;touch-action:none;user-select:none;-webkit-user-select:none}
.tabbar.min{right:calc(100% - 92px)}
.lens{position:absolute;top:4px;bottom:4px;left:0;width:60px;border-radius:28px;z-index:0;pointer-events:none;
  background:color-mix(in oklch,var(--p) 16%,transparent);
  transition:transform .5s cubic-bezier(.3,1.3,.5,1),width .5s cubic-bezier(.3,1.3,.5,1),scale .3s cubic-bezier(.3,1.6,.5,1),background-color .25s,box-shadow .25s}
.lens.lift{scale:1.14 1.24;background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 2px 3px 5px -2px rgba(255,255,255,.95),inset -2px -3px 6px -2px rgba(0,0,0,.14),0 8px 18px -6px rgba(0,0,0,.28)}
.screen.dark .lens.lift{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 2px 3px 5px -2px rgba(255,255,255,.4),0 8px 18px -6px rgba(0,0,0,.5)}
.tab{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:28px;
  color:var(--on-s);font-size:11px;font-weight:600;overflow:hidden;transition:flex .5s cubic-bezier(.3,1.15,.4,1),opacity .25s,color .25s}
.tab .ti{position:relative;display:grid;place-items:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tab .ms{font-size:25px}
.tab.on{color:var(--p)}
.tab.on .ms{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.tab.hov .ti{transform:scale(1.15)}
.tab .tl{white-space:nowrap}
.tab .bd{position:absolute;top:-5px;left:15px;min-width:18px;height:18px;font-size:10.5px;padding:0 5px;border:2px solid transparent;background-clip:padding-box}
.tabbar.min .tab:not(.on){flex:0 0 0;opacity:0;pointer-events:none}
.fabwrap{position:absolute;right:12px;bottom:26px;z-index:50;transition:transform .45s cubic-bezier(.3,1,.4,1),opacity .3s}
.fab{position:relative;width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--pc);color:var(--on-pc);
  box-shadow:0 8px 20px -6px oklch(.35 .1 var(--h) / .4),0 2px 5px oklch(.3 .05 var(--h) / .15);
  transition:border-radius .35s cubic-bezier(.3,1.5,.5,1),transform .2s cubic-bezier(.3,1.4,.5,1),background-color .35s}
.fab:hover{border-radius:26px}
.fab:active{border-radius:32px;transform:scale(.94)}
.fab .ms{font-size:26px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.fab.open .ms{transform:rotate(135deg)}
.fdial{position:absolute;right:0;bottom:76px;min-width:200px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:28px;
  opacity:0;transform:translateY(14px) scale(.9);transform-origin:bottom right;pointer-events:none;transition:opacity .2s,transform .42s cubic-bezier(.3,1.3,.5,1)}
.fdial.open{opacity:1;transform:none;pointer-events:auto}
.fdial button{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;border-radius:20px;font-size:15px;font-weight:600;text-align:left;transition:background-color .15s}
.fdial button:hover{background:color-mix(in oklch,var(--on-s) 8%,transparent)}
.fdial button i{width:36px;height:36px;border-radius:13px;display:grid;place-items:center;flex:none;font-style:normal}
.fdial button i .ms{font-size:20px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.screen.chat-open .tabbar,.screen.chat-open .fabwrap{transform:translateY(160%);opacity:0;pointer-events:none}
.screen.auth .tabbar,.screen.auth .fabwrap{transform:translateY(160%);opacity:0;pointer-events:none}

/* =========================================================
   通讯录
   ========================================================= */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 12px 4px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:100px;padding:14px 16px;border-radius:26px;text-align:left;
  transition:border-radius .3s cubic-bezier(.3,1.5,.5,1),transform .2s}
.tile:hover{border-radius:34px}
.tile:active{transform:scale(.97)}
.tile .ms{font-size:26px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.tile b{display:block;font-size:15px;font-weight:700}
.tile small{font-size:12px;opacity:.75}
.tile .bd{position:absolute;top:14px;right:14px}
.stars{display:flex;gap:6px;padding:4px 12px 8px;overflow-x:auto;scrollbar-width:none}
.stars::-webkit-scrollbar{display:none}
.star{width:70px;flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 0;border-radius:20px;font-size:12px;font-weight:500;transition:background-color .15s}
.star:hover{background:var(--s3)}
.star span{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-h{position:sticky;top:0;z-index:3;padding:10px 26px 6px;font-size:13px;font-weight:800;color:var(--p);background:var(--s)}
.frow{display:flex;align-items:center;gap:14px;padding:9px 16px;cursor:pointer;transition:background-color .15s}
.frow:hover{background:var(--s1)}
.frow .fn{font-size:15.5px;font-weight:600}
.frow .fs{font-size:12.5px;color:var(--on-sv);margin-top:2px}
.idx{position:absolute;right:4px;top:200px;bottom:120px;z-index:8;display:flex;flex-direction:column;justify-content:center;gap:2px}
.idx button{width:20px;height:20px;border-radius:50%;font-size:10.5px;font-weight:800;color:var(--on-sv)}
.idx button:hover,.idx button.on{background:var(--p);color:var(--on-p)}

/* =========================================================
   动态
   ========================================================= */
.segbtn{display:flex;margin:4px 14px 6px;height:42px;border-radius:21px;border:1px solid var(--ol);overflow:hidden}
.segbtn button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;color:var(--on-s);transition:background-color .2s,color .2s}
.segbtn button+button{border-left:1px solid var(--ol)}
.segbtn button .ms{font-size:18px;width:0;overflow:hidden;transition:width .25s cubic-bezier(.3,1.4,.5,1)}
.segbtn button.on{background:var(--sc);color:var(--on-sc)}
.segbtn button.on .ms{width:18px}
.post{margin:0 12px 10px;padding:16px;border-radius:28px;background:var(--card);animation:rowin .5s cubic-bezier(.2,.9,.3,1) backwards}
.ph{display:flex;align-items:center;gap:12px}
.ph b{display:block;font-size:15px;font-weight:700}
.ph span{font-size:12px;color:var(--on-sv)}
.pt{font-size:15px;line-height:1.65;margin:12px 0 0;white-space:pre-wrap;word-break:break-word}
.media{position:relative;display:grid;gap:4px;margin-top:12px;border-radius:22px;overflow:hidden}
.media.n2{grid-template-columns:1fr 1fr}
.media.n3{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}
.media img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;background:var(--s3);max-width:none;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.media img:hover{transform:scale(1.03)}
.media.n1 img{aspect-ratio:16/10}.media.n2 img{aspect-ratio:1/1}
.media.n3 img:first-child{grid-row:1/3;min-height:200px}
.media.n3 img:not(:first-child){aspect-ratio:1/1}
.loc{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px 0 8px;border-radius:15px;font-size:12px;font-weight:600;color:var(--on-s)}
.loc .ms{font-size:16px;color:var(--p);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
.pa{display:flex;align-items:center;gap:6px;margin-top:12px}
.pact{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:19px;background:var(--s2);color:var(--on-s);font-size:13.5px;font-weight:600;
  transition:background-color .2s,transform .2s cubic-bezier(.3,1.5,.5,1),border-radius .3s}
.pact:hover{background:var(--s4)}
.pact:active{transform:scale(.93)}
.pact .ms{font-size:20px}
.pact.liked{background:color-mix(in oklch,var(--err) 14%,var(--card));color:var(--err);border-radius:12px}
.pact.liked .ms{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;animation:pop .4s cubic-bezier(.3,1.7,.5,1)}
.pa .sp{flex:1}
.cmts{margin-top:10px;padding:10px 14px;border-radius:18px;background:var(--s2);font-size:13.5px;line-height:1.75;color:var(--on-sv)}
.cmts b{color:var(--on-s);font-weight:700}
.mason{display:flex;gap:8px;padding:0 12px}
.mcol{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.dc{background:var(--card);border-radius:22px;overflow:hidden;cursor:pointer;animation:rowin .5s cubic-bezier(.2,.9,.3,1) backwards;transition:transform .2s}
.dc:active{transform:scale(.98)}
.dc .im{position:relative}
.dc img{width:100%;display:block;object-fit:cover;background:var(--s3);max-width:none}
.dc .lk{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 9px 0 7px;border-radius:13px;font-size:11.5px;font-weight:700;color:var(--on-s)}
.dc .lk .ms{font-size:14px;color:var(--err);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
.dc .dt{font-size:13.5px;font-weight:600;line-height:1.45;padding:10px 12px 4px}
.dc .da{display:flex;align-items:center;gap:6px;padding:4px 12px 12px;font-size:12px;color:var(--on-sv)}

/* =========================================================
   我的
   ========================================================= */
.mecard{margin:4px 12px 0;padding:20px;border-radius:32px;background:var(--pc);color:var(--on-pc);position:relative;overflow:hidden}
.mecard .bg-shape{position:absolute;right:-50px;top:-60px;width:200px;height:200px;background:color-mix(in oklch,var(--p) 22%,transparent);animation:spin 40s linear infinite}
.mtop{position:relative;display:flex;align-items:center;gap:16px}
.mn{font-size:24px;font-weight:800;font-family:'Noto Sans SC',var(--font)}
.mid{display:flex;align-items:center;gap:4px;font-size:13px;opacity:.8;margin-top:4px;font-variant-numeric:tabular-nums;cursor:pointer}
.mid .ms{font-size:15px}
.mtop .ib{color:var(--on-pc);margin-left:auto;background:color-mix(in oklch,var(--card) 45%,transparent)}
.mchips{position:relative;display:flex;gap:8px;margin-top:16px}
.mchip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:18px;background:color-mix(in oklch,var(--card) 55%,transparent);font-size:13.5px;font-weight:600;transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.mchip:active{transform:scale(.94)}
.mchip .ms{font-size:18px}
.sdot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.mstats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in oklch,var(--on-pc) 14%,transparent)}
.mstats div{text-align:center;cursor:pointer}
.mstats b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.mstats span{font-size:12px;opacity:.75}
.sl{padding:20px 26px 8px;font-size:13px;font-weight:700;color:var(--on-sv)}
.pcard2{margin:0 12px;padding:18px;border-radius:28px;background:var(--card)}
.pc-t{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700}
.pc-t small{font-size:12.5px;font-weight:500;color:var(--on-sv)}
.swatches{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.sw{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.sw:hover{transform:scale(1.08)}
.sw:active{transform:scale(.92)}
.swi{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -90deg,oklch(.6 .15 var(--sh)) 0 50%,oklch(.76 .1 calc(var(--sh) + 70)) 50% 75%,oklch(.87 .055 var(--sh)) 75% 100%)}
.sw.on .swi{animation:spin 14s linear infinite,pop .45s cubic-bezier(.3,1.7,.5,1)}
.sw .ms{position:relative;font-size:20px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);
  font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 20;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.sw.on .ms{opacity:1;transform:none}
.intro .swatches{margin-top:0}
.intro .sw{width:46px;height:46px}
.gseg{display:flex;gap:4px;margin-top:14px;padding:4px;border-radius:22px;background:var(--s2)}
.gseg button{flex:1;height:38px;border-radius:18px;font-size:13.5px;font-weight:600;color:var(--on-sv);display:flex;align-items:center;justify-content:center;gap:6px;transition:background-color .25s,color .25s,box-shadow .25s}
.gseg button .ms{font-size:18px}
.gseg button.on{background:var(--card);color:var(--on-s);box-shadow:0 1px 4px oklch(.3 .04 var(--h) / .15)}
.screen.dark .gseg button.on{background:var(--s4)}
.gprev{position:relative;height:84px;margin-top:12px;border-radius:20px;overflow:hidden;
  background:linear-gradient(120deg,oklch(.82 .08 calc(var(--h) + 40)),oklch(.72 .12 var(--h)) 55%,oklch(.66 .13 calc(var(--h) + 90)))}
.gprev .glass{position:absolute;left:14px;right:14px;top:50%;height:46px;margin-top:-23px;border-radius:23px;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:13.5px;font-weight:600}
.gprev .ms{font-size:20px;color:var(--p);font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.mswitch{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--ol);width:100%;text-align:left}
.mswitch .ms.lead{font-size:22px;color:var(--on-sv)}
.mswitch .t{flex:1;font-size:15px;font-weight:600}
.m3sw{position:relative;width:52px;height:32px;border-radius:16px;border:2px solid var(--ol);background:var(--s4);flex:none;transition:background-color .25s,border-color .25s}
.m3sw i{position:absolute;top:50%;left:6px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--on-sv);display:grid;place-items:center;
  transition:left .35s cubic-bezier(.3,1.5,.5,1),width .3s,height .3s,margin .3s,background-color .25s}
.m3sw i .ms{font-size:16px;opacity:0;color:var(--pc);font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 20;transition:opacity .2s}
.m3sw.on{background:var(--p);border-color:var(--p)}
.m3sw.on i{left:22px;width:24px;height:24px;margin-top:-12px;background:var(--on-p);color:var(--p)}
.m3sw.on i .ms{opacity:1}
.slist{margin:0 12px;display:flex;flex-direction:column;gap:2px}
.li{display:flex;align-items:center;gap:14px;min-height:62px;padding:10px 16px;background:var(--card);border-radius:6px;width:100%;text-align:left;transition:background-color .15s,border-radius .3s}
.li:first-child{border-radius:24px 24px 6px 6px}
.li:last-child{border-radius:6px 6px 24px 24px}
.li:only-child{border-radius:24px}
.li:hover{background:var(--s1)}
.li:active{border-radius:20px}
.li .lic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.li .lic .ms{font-size:21px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.li .lt2{flex:1;min-width:0}
.li .lt2 b{display:block;font-size:15px;font-weight:600}
.li .lt2 small{font-size:12.5px;color:var(--on-sv)}
.li .cv{font-size:20px;color:var(--on-sv);opacity:.6}
.logout{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 24px);margin:16px 12px 0;height:54px;border-radius:27px;
  background:color-mix(in oklch,var(--err) 12%,var(--card));color:var(--err);font-size:15px;font-weight:700;transition:border-radius .3s cubic-bezier(.3,1.5,.5,1)}
.logout:active{border-radius:16px}
.ver{text-align:center;font-size:11.5px;color:var(--on-sv);padding:18px 20px 0;line-height:1.8;opacity:.8}

/* =========================================================
   聊天
   ========================================================= */
.chat{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in oklch,var(--pc) 20%,var(--s2)) 0%,var(--s2) 34%,var(--s2) 100%)}
/* padding 不再做过渡：置顶横幅出现/消失会切换顶部内边距，过渡会让消息跟着滑动 */
.cb{position:absolute;inset:0;overflow-y:auto;padding:104px 12px 96px;display:flex;flex-direction:column;gap:2px;scrollbar-width:none;overscroll-behavior:contain}
.cb::-webkit-scrollbar{display:none}
.chat.replying .cb{padding-bottom:156px}
.edge-t{position:absolute;left:0;right:0;top:0;height:120px;z-index:5;pointer-events:none;background:linear-gradient(color-mix(in oklch,var(--s2) 92%,transparent) 30%,transparent)}
.edge-b{position:absolute;left:0;right:0;bottom:0;height:100px;z-index:5;pointer-events:none;background:linear-gradient(transparent,color-mix(in oklch,var(--s2) 88%,transparent) 70%)}
.chead{position:absolute;left:10px;right:10px;top:42px;z-index:10;display:flex;align-items:center;gap:8px}
.gbtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--on-s);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.gbtn:active{transform:scale(.88)}
.who{flex:1;min-width:0;height:48px;border-radius:24px;display:flex;align-items:center;gap:10px;padding:0 14px 0 7px;text-align:left;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.who:active{transform:scale(.97)}
.who .wt{min-width:0;flex:1}
.who b{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.who i{display:block;font-style:normal;font-size:11.5px;color:var(--on-sv);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who i.typing{color:var(--p);font-weight:600}
.gcap{height:48px;border-radius:24px;display:flex;align-items:center;padding:0 4px;flex:none}
.gcap button{width:42px;height:40px;border-radius:20px;display:grid;place-items:center;color:var(--on-s);transition:background-color .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.gcap button:hover{background:color-mix(in oklch,var(--on-s) 8%,transparent)}
.gcap button:active{transform:scale(.88)}
.gcap .ms,.gbtn .ms{font-size:23px}

.day{align-self:center;margin:14px 0 8px}
.day span{display:inline-block;height:28px;line-height:28px;padding:0 13px;border-radius:14px;font-size:12px;font-weight:700;color:var(--on-sv)}
.sys{align-self:center;margin:6px 0;max-width:86%;text-align:center}
.sys span{display:inline-block;padding:5px 12px;border-radius:12px;background:color-mix(in oklch,var(--s4) 85%,transparent);font-size:12px;color:var(--on-sv);line-height:1.5}
.mr{display:flex;align-items:flex-end;gap:8px;position:relative}
.mr.first{margin-top:8px}
.mr.out{justify-content:flex-end}
.mr.new{animation:bin .38s cubic-bezier(.25,1.2,.4,1)}
@keyframes bin{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.mr.out.new{transform-origin:bottom right}.mr.in.new{transform-origin:bottom left}
.mav{width:34px;flex:none;display:flex}
.mc{max-width:78%;min-width:0;display:flex;flex-direction:column}
.mr.out .mc{align-items:flex-end}
.snd{font-size:12px;font-weight:700;margin:0 0 3px 12px;color:oklch(.5 .13 var(--ah))}
.screen.dark .snd{color:oklch(.8 .1 var(--ah))}
.bub{position:relative;max-width:100%;padding:8px 12px 8px 14px;border-radius:22px;background:var(--bin);color:var(--on-s);font-size:15px;line-height:1.5;word-break:break-word;
  box-shadow:0 1px 2px oklch(.3 .04 var(--h) / .08);transition:transform .2s cubic-bezier(.3,1.5,.5,1),background-color .35s,color .35s;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mr.out .bub{background:var(--p);color:var(--on-p)}
.bub.pressing{transform:scale(.96)}
.brow{display:flex;align-items:flex-end;gap:6px;min-width:0;max-width:100%}
.mtime{flex:none;font-size:11px;color:var(--on-sv);padding-bottom:5px;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:.9}
.qt{display:block;margin:1px 0 7px;padding:6px 10px;border-radius:10px;background:color-mix(in oklch,currentColor 10%,transparent);font-size:13px;line-height:1.45}
.qt b{display:block;font-weight:700}
.qt span{display:block;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:196px}
.bub.pic{padding:4px;line-height:0}
.bub.pic img{width:206px;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block;max-width:none;background:var(--s3);cursor:pointer}
.bub.stk{padding:0;background:none!important;box-shadow:none}
.bub.stk img{width:110px;height:110px;object-fit:contain;display:block;max-width:none;cursor:pointer}
.bub.emo{padding:4px 8px;font-size:34px;line-height:1.15;background:none!important;box-shadow:none}
.bub.vc{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;min-width:178px;cursor:pointer}
.bub.vc .vi{font-size:22px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;opacity:.92}
.bub.vc audio{display:none}
.wv{display:flex;align-items:center;gap:2.5px;height:26px;flex:1}
.wv i{width:3px;border-radius:2px;background:currentColor;opacity:.32;transition:opacity .12s}
.wv i.on{opacity:1}
.du{font-size:12.5px;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}
.bub.file{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.bub.file .fi{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in oklch,currentColor 12%,transparent);flex:none}
.bub.file .fi .ms{font-size:24px}
.bub.file .ft{min-width:0}
.bub.file b{display:block;font-size:14.5px;font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bub.file small{font-size:11.5px;opacity:.75}
.rxs{display:flex;margin-top:4px}
.mr.in .rxs{padding-left:12px}.mr.out .rxs{justify-content:flex-end;padding-right:12px}
.rx{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 8px;border-radius:12px;background:var(--card);border:2px solid var(--s2);font-size:13px;font-weight:700;color:var(--on-sv);
  animation:pop .4s cubic-bezier(.3,1.7,.5,1);cursor:pointer}
.typing{display:flex;gap:4px;padding:14px 16px;background:var(--bin);border-radius:22px;border-bottom-left-radius:7px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--on-sv);animation:bnc 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-4px);opacity:1}}

.composer{position:absolute;left:10px;right:10px;bottom:24px;z-index:10;display:flex;flex-direction:column;gap:8px}
.crow{display:flex;align-items:flex-end;gap:8px}
.cfield{flex:1;min-width:0;display:flex;align-items:center;height:50px;border-radius:25px;padding:0 4px 0 18px}
.cfield input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;color:var(--on-s)}
.cfield input::placeholder{color:var(--on-sv)}
.cfield button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--on-sv);transition:color .2s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.cfield button.on{color:var(--p)}
.cfield button:active{transform:scale(.88)}
#btnPlus{width:50px;height:50px}
#btnPlus .ms{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
#btnPlus.on .ms{transform:rotate(135deg)}
.sendb{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--p);color:var(--on-p);
  box-shadow:0 6px 16px -6px oklch(.4 .14 var(--h) / .6);transition:border-radius .4s cubic-bezier(.3,1.5,.5,1),transform .2s cubic-bezier(.3,1.6,.5,1),background-color .3s}
.sendb:active{transform:scale(.9)}
.sendb.has{border-radius:17px}
.sendb:disabled{opacity:.55}
.sendb .ms{font-size:24px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.sendb.swap .ms{animation:swapI .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes swapI{0%{transform:scale(.3) rotate(-60deg);opacity:0}100%{transform:none;opacity:1}}
.panel{border-radius:28px;padding:14px 10px;transform-origin:bottom left;opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;position:absolute;left:0;right:0;bottom:58px;
  transition:opacity .2s,transform .35s cubic-bezier(.3,1.3,.5,1);max-height:300px;overflow-y:auto;scrollbar-width:none}
.panel::-webkit-scrollbar{display:none}
.panel.open{opacity:1;transform:none;pointer-events:auto}
#emojiPanel{transform-origin:bottom right}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 0}
.pi{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--on-s)}
.pi i{width:56px;height:56px;border-radius:20px;display:grid;place-items:center;transition:border-radius .3s cubic-bezier(.3,1.5,.5,1),transform .2s}
.pi:hover i{border-radius:28px}
.pi:active i{transform:scale(.9)}
.pi .ms{font-size:26px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.egrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:184px;overflow-y:auto;scrollbar-width:none}
.egrid::-webkit-scrollbar{display:none}
.egrid button{font-size:24px;padding:6px 0;border-radius:12px;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background-color .15s}
.egrid button:hover{background:color-mix(in oklch,var(--on-s) 8%,transparent);transform:scale(1.2)}
.egrid img{width:30px;height:30px;object-fit:contain;display:block;margin:0 auto}
.etabs{display:flex;gap:6px;padding:0 2px 10px}
.etabs button{height:30px;padding:0 12px;border-radius:15px;font-size:12.5px;font-weight:600;color:var(--on-sv);background:var(--s2)}
.etabs button.on{background:var(--sc);color:var(--on-sc)}
.replybar{display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 16px;border-radius:26px}
.replybar[hidden]{display:none}
.replybar>.ms{font-size:22px;color:var(--p)}
.replybar .rt{flex:1;min-width:0;border-left:3px solid var(--p);padding-left:10px}
.replybar b{display:block;font-size:12.5px;color:var(--p);font-weight:700}
.replybar span{display:block;font-size:13px;color:var(--on-sv);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replybar button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--on-sv)}

/* 气泡长按菜单 */
.ctxs{position:absolute;inset:0;z-index:80;background:oklch(.2 .03 var(--h) / .16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s}
.ctxs.on{opacity:1;pointer-events:auto}
.ctx{position:absolute;z-index:81;display:flex;flex-direction:column;gap:8px;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .2s,transform .38s cubic-bezier(.3,1.35,.5,1)}
.ctx.on{opacity:1;transform:none;pointer-events:auto}
.rxbar{display:flex;gap:2px;padding:6px;border-radius:30px;align-self:flex-start}
.ctx.r .rxbar{align-self:flex-end}
.rxbar button{width:42px;height:42px;border-radius:50%;font-size:25px;display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.7,.5,1),background-color .15s}
.rxbar button:hover{transform:scale(1.28) translateY(-3px)}
.rxbar button.on{background:color-mix(in oklch,var(--p) 22%,transparent)}
.ctxm{min-width:196px;padding:6px;border-radius:24px;align-self:flex-start}
.ctx.r .ctxm{align-self:flex-end}
.ctxm button{display:flex;align-items:center;gap:14px;width:100%;height:46px;padding:0 14px;border-radius:18px;font-size:15px;font-weight:500;color:var(--on-s);text-align:left;transition:background-color .15s}
.ctxm button:hover{background:color-mix(in oklch,var(--on-s) 8%,transparent)}
.ctxm button .ms{font-size:21px;color:var(--on-sv)}
.ctxm button.danger,.ctxm button.danger .ms{color:var(--err)}

/* =========================================================
   底部抽屉 / 弹层
   ========================================================= */
.scrim{position:absolute;inset:0;z-index:70;background:oklch(.15 .02 var(--h) / .38);opacity:0;pointer-events:none;transition:opacity .28s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:71;max-height:84%;display:flex;flex-direction:column;padding-bottom:26px;border-radius:30px 30px 0 0;background:var(--s1);
  transform:translateY(105%);transition:transform .45s cubic-bezier(.25,1,.3,1)}
.sheet.on{transform:none}
.grab{width:34px;height:4px;border-radius:4px;background:var(--on-sv);opacity:.4;margin:12px auto 6px;flex:none}
.sh-t{padding:10px 24px 10px;font-size:20px;font-weight:700;flex:none;font-family:'Noto Sans SC',var(--font)}
.sh-t:empty{display:none}
.sh-b{overflow-y:auto;scrollbar-width:none;padding-bottom:6px}
.sh-b::-webkit-scrollbar{display:none}
.srow{display:flex;align-items:center;gap:18px;width:100%;height:56px;padding:0 24px;font-size:16px;font-weight:500;text-align:left;color:var(--on-s);transition:background-color .15s}
.srow:hover{background:var(--s3)}
.srow .ms{color:var(--on-sv)}
.srow.danger,.srow.danger .ms{color:var(--err)}
.shead{display:flex;align-items:center;gap:14px;padding:4px 24px 14px}
.shead b{display:block;font-size:18px;font-weight:700}
.shead span{font-size:13px;color:var(--on-sv)}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px 16px 14px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0;border-radius:22px;background:var(--card);font-size:12.5px;font-weight:600;transition:border-radius .3s cubic-bezier(.3,1.5,.5,1),background-color .15s}
.qa button:hover{border-radius:30px;background:var(--s3)}
.qa .ms{font-size:24px;color:var(--p);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.rq{display:flex;align-items:center;gap:14px;padding:10px 24px}
.rq .ri{flex:1;min-width:0}
.rq .ri b{display:block;font-size:15.5px;font-weight:700}
.rq .ri span{font-size:13px;color:var(--on-sv)}
.btn{height:38px;padding:0 18px;border-radius:19px;background:var(--p);color:var(--on-p);font-size:14px;font-weight:700;flex:none;transition:border-radius .3s cubic-bezier(.3,1.5,.5,1),transform .2s,opacity .2s}
.btn:active{border-radius:12px;transform:scale(.95)}
.btn.tonal{background:var(--sc);color:var(--on-sc)}
.btn.ghost{background:var(--s2);color:var(--on-s)}
.btn.danger{background:color-mix(in oklch,var(--err) 14%,var(--card));color:var(--err)}
.btn.sm{height:32px;padding:0 13px;font-size:13px;border-radius:16px}
.btn.lg{height:48px;padding:0 24px;font-size:15px;border-radius:24px}
.btn.block{width:100%;display:flex;align-items:center;justify-content:center}
.btn:disabled{opacity:.5;pointer-events:none}
.qrbox{width:210px;margin:6px auto 14px;padding:16px;border-radius:32px;background:#fff;box-shadow:0 2px 10px oklch(.3 .04 var(--h) / .1)}
.qr{display:grid;grid-template-columns:repeat(25,1fr);aspect-ratio:1/1}
.qr i.d{background:oklch(.3 .1 var(--h));border-radius:1.5px}
.sbox{position:relative;width:200px;height:200px;margin:8px auto 16px;border-radius:36px;background:var(--s3);overflow:hidden}
.sbox b{position:absolute;width:30px;height:30px;border:3.5px solid var(--p);border-radius:10px}
.sbox b:nth-of-type(1){top:16px;left:16px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.sbox b:nth-of-type(2){top:16px;right:16px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.sbox b:nth-of-type(3){bottom:16px;left:16px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.sbox b:nth-of-type(4){bottom:16px;right:16px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.sline{position:absolute;left:24px;right:24px;height:3px;border-radius:3px;background:var(--p);box-shadow:0 0 12px var(--p);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:26px}50%{top:170px}}
.sc{text-align:center;font-size:13.5px;color:var(--on-sv);line-height:1.8;padding:0 24px}
.snack{position:absolute;left:14px;right:14px;bottom:104px;z-index:99;display:flex;align-items:center;gap:12px;min-height:50px;padding:12px 18px;border-radius:16px;background:var(--inv);color:var(--on-inv);
  font-size:14px;line-height:1.45;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .22s,transform .38s cubic-bezier(.3,1.3,.5,1);box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
.snack.on{opacity:1;transform:none}
.snack .ms{font-size:20px;color:var(--p);filter:brightness(1.4)}
.screen.dark .snack .ms{filter:none;color:oklch(.5 .15 var(--h))}
.screen.chat-open .snack{bottom:88px}

/* =========================================================
   通话（演示）
   ========================================================= */
.call{position:absolute;inset:0;z-index:88;color:#fff;display:flex;flex-direction:column;align-items:center;padding:92px 24px 46px;opacity:0;pointer-events:none;transform:scale(1.04);
  background:radial-gradient(80% 55% at 25% 15%,oklch(.55 .14 var(--ch)),transparent 70%),radial-gradient(70% 55% at 85% 85%,oklch(.45 .13 calc(var(--ch) + 60)),transparent 70%),oklch(.2 .04 var(--ch));
  transition:opacity .3s,transform .45s cubic-bezier(.25,1,.3,1)}
.call.on{opacity:1;pointer-events:auto;transform:none}
.call .lab{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:16px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
.call .lab .ms{font-size:16px}
.cring{position:relative;width:176px;height:176px;margin-top:40px;display:grid;place-items:center}
.cring .shp{position:absolute;inset:0;background:rgba(255,255,255,.14)}
.call.ringing .cring .shp{animation:spin 7s linear infinite,breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{scale:1.06}}
.cring .avw{box-shadow:0 12px 30px rgba(0,0,0,.3);border-radius:50%}
.call .cn{font-size:30px;font-weight:800;margin-top:28px;font-family:'Noto Sans SC',var(--font)}
.call .cs{font-size:15px;opacity:.75;margin-top:8px;font-variant-numeric:tabular-nums;height:20px}
.cacts{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.cx{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}
.cx i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 1px rgba(255,255,255,.1);
  transition:border-radius .35s cubic-bezier(.3,1.5,.5,1),background-color .25s,color .25s,transform .2s}
.cx:active i{transform:scale(.9)}
.cx.on i{background:#fff;color:oklch(.25 .05 var(--ch));border-radius:22px}
.cx .ms{font-size:26px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.cx.hang i{width:84px;border-radius:31px;background:#E5484D}
.cx.hang:hover i{border-radius:22px}

/* =========================================================
   登录 / 注册
   ========================================================= */
.authwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:56px 24px 40px;background:linear-gradient(180deg,color-mix(in oklch,var(--pc) 34%,var(--s)) 0%,var(--s) 60%)}
.abrand{display:flex;align-items:center;gap:14px}
.abrand .m{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--p);color:var(--on-p);font-size:30px;font-weight:900;
  box-shadow:0 12px 28px -10px oklch(.4 .14 var(--h) / .7);font-family:'Noto Sans SC',var(--font)}
.abrand img.m{object-fit:cover;display:block}
.abrand b{display:block;font-size:26px;font-weight:900;letter-spacing:.02em;font-family:'Noto Sans SC',var(--font)}
.abrand small{display:block;font-size:12.5px;color:var(--on-sv);margin-top:2px}
.authcard{width:100%;max-width:330px;padding:20px;border-radius:30px;background:var(--card);box-shadow:0 10px 30px -14px oklch(.3 .05 var(--h) / .35)}
.atabs{display:flex;padding:4px;border-radius:22px;background:var(--s2);margin-bottom:16px}
.atabs button{flex:1;height:38px;border-radius:18px;font-size:14px;font-weight:700;color:var(--on-sv);transition:background-color .25s,color .25s,box-shadow .25s}
.atabs button.on{background:var(--card);color:var(--p);box-shadow:0 1px 4px oklch(.3 .04 var(--h) / .18)}
.tf{margin-bottom:12px}
.tf>label{display:block;font-size:12.5px;font-weight:600;color:var(--on-sv);margin:0 0 6px 14px}
.tf-box{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:16px;background:var(--s2);border:1.5px solid transparent;transition:border-color .2s,background-color .2s}
.tf-box:focus-within{border-color:var(--p);background:var(--card)}
.tf-box>.ms{font-size:20px;color:var(--on-sv)}
.tf-box input,.tf-box textarea{flex:1;min-width:0;border:0;outline:0;background:none;font-size:15.5px;color:var(--on-s);resize:none;font-family:inherit}
.tf-box textarea{height:76px;padding:12px 0}
.tf-box input::placeholder,.tf-box textarea::placeholder{color:var(--on-sv)}
.tf-box.load{height:auto;padding:0}
.tf-box.load textarea{height:110px;padding:14px 16px}
.err-line{color:var(--err);font-size:12.5px;min-height:17px;margin:0 0 8px 14px;font-weight:600}
.hint-line{color:var(--on-sv);font-size:12px;line-height:1.6;margin:2px 0 0 14px}
.authfoot{margin-top:auto;font-size:11.5px;color:var(--on-sv);text-align:center;line-height:1.8;opacity:.85}
.cap-hint{padding:20px 12px;text-align:center;font-size:13px;color:var(--on-sv)}
.cap-fail{color:var(--err);font-weight:600}

/* ---- 账号切换首页（QQ 式） ---- */
.acchome .acc-hero{display:flex;align-items:center;gap:14px;padding:8px 6px;cursor:pointer;border-radius:20px;transition:background-color .2s}
.acchome .acc-hero:hover{background:var(--s2)}
.acchome .acc-hero .avw{flex:none}
.acchome .acc-meta{flex:1;min-width:0}
.acchome .acc-meta b{display:block;font-size:16.5px;font-weight:800;color:var(--on-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acchome .acc-meta small{display:block;font-size:12px;color:var(--on-sv);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acchome .acc-chev{font-size:22px;color:var(--on-sv);transition:transform .3s}
.acchome.open .acc-chev{transform:rotate(180deg)}
.acc-list{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease}
.acchome.open .acc-list{max-height:520px;opacity:1}
.acc-list .acc-row{display:flex;align-items:center;gap:12px;margin-top:10px;padding:9px 10px;border-radius:18px;background:var(--s2);border:1.5px solid transparent;cursor:pointer;transition:border-color .2s,background-color .2s}
.acc-list .acc-row:hover{border-color:var(--p)}
.acc-list .acc-row.cur{border-color:color-mix(in oklch,var(--p) 45%,transparent)}
.acc-list .acc-row .avw{flex:none}
.acc-list .acc-mark{font-size:20px;color:var(--p)}
.acc-list .acc-del{width:32px;height:32px;border-radius:50%;color:var(--err);font-size:18px}
.acc-list .acc-del:hover{background:color-mix(in oklch,var(--err) 14%,transparent)}
.acc-tools{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:0 4px}
.acc-tools a{font-size:13.5px;font-weight:700;color:var(--p);display:inline-flex;align-items:center;gap:4px}
.acc-tools a .ms{font-size:17px}
.acchome .btn{margin-top:16px}
.acchome .hint-line{text-align:center;margin:10px 0 0}
.acchome .hint-line a{color:var(--p);font-weight:600;text-decoration:none}
.acc-links{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:13px}
.acc-links a{color:var(--p);font-weight:600;text-decoration:none}
.acc-links span{color:var(--on-sv);opacity:.7}
.acc-tos{margin-top:14px;font-size:11px;color:var(--on-sv);text-align:center;line-height:1.6;opacity:.85}

/* =========================================================
   装扮商店
   ========================================================= */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 12px 8px}
.gcard{background:var(--card);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.gprev2{height:104px;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklch,var(--p) 14%,transparent),color-mix(in oklch,var(--t) 18%,transparent))}
.gprev2 iframe{width:100%;height:100%;border:0;background:transparent}
.ginfo{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.ginfo b{font-size:14px;font-weight:700;display:flex;align-items:center;gap:5px}
.ginfo small{font-size:11.5px;color:var(--on-sv);line-height:1.45;flex:1}
.ginfo .gfoot{display:flex;align-items:center;gap:6px}
.ginfo .gfoot .sp{flex:1}
.tagsm{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:9px;background:var(--sc);color:var(--on-sc)}

/* =========================================================
   已读回执 / 置顶横幅 / 备注与分组（与客户端同步的新功能）
   ========================================================= */

/* 已读回执：不用 WhatsApp/Telegram 的双勾，改用气泡尾部一个极小色点（主题色=已读，淡灰=未读） */
.rdot{width:6px;height:6px;border-radius:50%;margin-top:3px;flex:none;
  background:color-mix(in oklch,var(--on-sv) 40%,transparent);transition:background-color .3s}
.rdot.on{background:var(--p)}
.mr.out .rdot{margin-right:3px}

/* 置顶消息横幅：位于聊天头部下方，只展示第一条置顶消息的摘要 */
.pinbar{position:absolute;left:10px;right:10px;top:96px;z-index:9;display:flex;align-items:center;gap:8px;
  padding:8px 6px 8px 12px;border-radius:14px;color:var(--on-s)}
.pinbar[hidden]{display:none}
.pinbar .pi-ic{font-size:16px;flex:none;color:var(--p);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.pinbar .pb-t{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.4;text-align:left;color:var(--on-s);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinbar .pb-n{flex:none;font-size:11.5px;font-weight:700;color:var(--on-sv)}
.pinbar .pb-x{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--on-sv);transition:background-color .15s,transform .2s}
.pinbar .pb-x:hover{background:color-mix(in oklch,var(--on-s) 8%,transparent)}
.pinbar .pb-x:active{transform:scale(.88)}
.pinbar .pb-x .ms{font-size:18px}
/* 有置顶横幅时给消息区让出高度 */
.chat.pinned .cb{padding-top:150px}
.chat.pinned .edge-t{height:150px}

/* 通讯录分组筛选胶囊：比消息页的胶囊再紧凑一点 */
.chips.tight{padding:8px 14px 2px}

/* 群成员行右侧的管理入口 */
.frow .cv{flex:none;font-size:20px;color:var(--on-sv);opacity:.6}

/* =========================================================
   通用补丁
   ========================================================= */
.sp{flex:1}
.muted{color:var(--on-sv)}
.center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.wrap{word-break:break-word}
.sk{background:linear-gradient(90deg,var(--s2),var(--s3),var(--s2));background-size:200% 100%;border-radius:12px;animation:shim 1.4s infinite}
@keyframes shim{to{background-position:-200% 0}}
.skrow{display:flex;align-items:center;gap:14px;padding:10px 16px}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid color-mix(in oklch,var(--p) 25%,transparent);border-top-color:var(--p);animation:spin .8s linear infinite}
.loadbox{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px;color:var(--on-sv);font-size:13.5px}
.lightbox{position:absolute;inset:0;z-index:95;background:oklch(.12 .02 var(--h) / .9);display:grid;place-items:center;padding:22px;animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.lightbox img{max-width:100%;max-height:100%;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lightbox .cl{position:absolute;top:44px;right:18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16)}
.tile2{display:flex;align-items:center;gap:14px;padding:10px 16px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:9px;font-size:11px;font-weight:700;background:var(--sc);color:var(--on-sc)}
.tag.ok{background:color-mix(in oklch,var(--ok) 18%,var(--card));color:color-mix(in oklch,var(--ok) 70%,var(--on-s))}
.tag.err{background:color-mix(in oklch,var(--err) 16%,var(--card));color:var(--err)}
.fav-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px}
.fav-item .fb{flex:1;min-width:0}
.fav-item b{font-size:12.5px;color:var(--on-sv);font-weight:700}
.fav-item p{margin:3px 0 0;font-size:14px;line-height:1.6;word-break:break-word}
.fav-item img{max-width:100%;border-radius:14px;margin-top:6px;cursor:pointer}
.srow .cv{margin-left:auto;font-size:20px;color:var(--on-sv);opacity:.6}

/* 桌面端细滚动条 */
@media(min-width:521px){
  .scroll::-webkit-scrollbar,.sh-b::-webkit-scrollbar{width:8px}
  .scroll::-webkit-scrollbar-thumb,.sh-b::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--on-sv) 34%,transparent);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
}