/* ============================================================================
   hensieye 官网样式 —— Fluent 2 设计规范
   ----------------------------------------------------------------------------
   布局骨架参考 EA 官网：顶部主导航（带下拉）→ 全宽 Hero → 若干内容 Section。
   ★ 页面里没有任何图标、没有任何自绘图形：全部是文字 + 原生控件 + 纯 CSS 布局。
   ★ 颜色 / 圆角 / 阴影 / 字体 / 间距取自 Fluent 2 的设计令牌。
   ============================================================================ */

:root {
    /* ---- 品牌色（Fluent 2 Brand ramp） ---- */
    --brand-10: #061724;
    --brand-60: #0F6CBD;
    --brand-70: #115EA3;
    --brand-80: #0F548C;
    --brand-100: #EFF6FC;

    /* ---- 中性色（浅色主题） ---- */
    --bg-1: #FFFFFF;
    --bg-2: #FAFAFA;
    --bg-3: #F5F5F5;

    --fg-1: #242424;
    --fg-2: #424242;
    --fg-3: #616161;
    --fg-on-brand: #FFFFFF;

    --stroke-subtle: #F0F0F0;
    --stroke-2: #E0E0E0;

    /* ---- 顶栏专用：固定白底深字（不参与深色模式） ---- */
    --nav-bg: #FFFFFF;
    --nav-stroke: #EBEBEB;
    --nav-fg: #242424;
    --nav-fg-2: #424242;
    --nav-hover: #F5F5F5;
    --nav-height: 48px;      /* 主栏（缩小后的高度） */
    --util-height: 36px;     /* 最上方那条：公司名 + 账户 */

    /* ★ 两栏共用的水平内边距。
       两栏的左侧文字都从这里起排，所以第一栏的「hensieye」与
       第二栏的「hensieye®」落在同一条竖线上（上下对齐）。
       想整体移动这两栏的文字，只改这一个数即可。 */
    --bar-pad-x: 24px;

    /* ---- 圆角（Fluent 2 Radius 档位） ---- */
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;

    /* ---- 阴影（Fluent 2 Elevation） ---- */
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
    --shadow-8: 0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
    --shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);

    /* ---- 字体（Fluent 2 Typography） ---- */
    --font-base: "Segoe UI Variable Text", "Segoe UI", -apple-system,
                 BlinkMacSystemFont, "Microsoft YaHei UI", "Microsoft YaHei",
                 sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI Variable Text",
                    "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

    /* ---- 间距 ---- */
    --gap-xs: 4px;
    --gap-s: 8px;
    --gap-m: 12px;
    --gap-l: 16px;
    --gap-xl: 24px;
    --gap-2xl: 32px;
    --gap-3xl: 48px;
    --gap-4xl: 64px;

    /* 内容区最大宽度：调大以后，宽屏上每块内容（含产品图）会等比放大，
       整屏更饱满；窗口比它窄时照旧跟着窗口走。 */
    --page-max: 1400px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-1: #1F1F1F;
        --bg-2: #141414;
        --bg-3: #292929;

        --fg-1: #FFFFFF;
        --fg-2: #D6D6D6;
        --fg-3: #ADADAD;

        --stroke-subtle: #333333;
        --stroke-2: #4D4D4D;

        --brand-60: #479EF5;
        --brand-70: #62ABF5;
        --brand-80: #2886DE;
        --brand-100: #082338;
    }
}

/* ============================================================================
   基础
   ============================================================================ */

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;

    /* ★ 整页不许横向滚动：3D 轮播那两张图会滑到画框外，
       不挡住的话页面底部会多出一条横向滑块。 */
    overflow-x: hidden;

    /* ★ 纵向滑块也不显示（只隐藏外观、不禁止滚动）：
       页面照旧能用滚轮 / 触控板 / 键盘滚动，只是右侧不再有那条滑块，
       而且不会占掉 17px 的内容宽度。 */
    scrollbar-width: none;              /* Firefox */
}

html::-webkit-scrollbar {               /* Edge / Chrome / WebView2 */
    width: 0;
    height: 0;
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 14px;
    line-height: 20px;
    color: var(--fg-1);
    background: var(--bg-1);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a {
    color: var(--brand-60);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--fg-1);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* 全站统一的居中容器 */
.shell {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--gap-xl);
}

/* ============================================================================
   最上方那栏：公司名（左）+ 账户（右）
   —— 对应 EA 的 NetworkNav：深色底、比主栏矮
   ============================================================================ */

.utilbar {
    background: #1A1A1A;
    color: #FFFFFF;
}

.utilbar__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-l);

    /* ★ 不设 max-width、不居中收窄：左右两端各贴窗口边缘（只留 padding 的呼吸位）
       ★ 水平内边距用 --bar-pad-x：与第二栏共用同一个值，两栏左侧文字才对得齐 */
    height: var(--util-height);
    padding: 0 var(--bar-pad-x);
}

.utilbar__company {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;

    /* ★ 这里不加 letter-spacing：字距会把首字起点往右推一点点，
       首字起点必须严格一致，否则两个「h」对不到一条竖线上。 */

    /* 降低透明度：它只是公司署名，不该和下面主栏的品牌名抢注意力 */
    opacity: .72;
}

/* 深色栏里商标右上角那个 ®：与主栏品牌名上的 .tm 同一套观感（小一号、上标）。
   ★ 用 vertical-align 抬起来，而不是 <sup> —— <sup> 会被浏览器改字号，
     反而跟旁边那串字对不齐。 */
.utilbar__company .tm {
    margin-left: 1px;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    vertical-align: 6px;
}

.utilbar__spacer { flex: 1; }

.utilbar__account {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    color: #FFFFFF;
    border-radius: var(--radius-md);
}
.utilbar__account:hover { background: rgba(255, 255, 255, .16); }

/* ============================================================================
   图标：官方 Fluent System Icons，用 mask 上色
   （不改 SVG 本身、不自己画路径；颜色跟随 currentColor）
   ============================================================================ */

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 右上角的账户图标不走 mask：它是一段内联 SVG（见 index.html）。
   mask 要多发一次图片请求，一旦那次请求失败（缓存里的旧 404 等），
   整个图标就直接是空白 —— 内联没有这个问题。 */

/* ============================================================================
   主栏：logo（左）+ 主导航（中）+ 操作区（右）
   ============================================================================ */

.nav {
    position: sticky;
    top: 0;
    z-index: 20;

    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-stroke);
    color: var(--nav-fg);
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-xl);

    /* ★ 同上：左右贴边，不再收窄居中；
       水平内边距与第一栏共用 --bar-pad-x，两栏左侧文字才落在同一条竖线上 */
    height: var(--nav-height);
    padding: 0 var(--bar-pad-x);
}

.nav__brand {
    /* ★ 与右侧导航项**中线对齐**：.nav__inner 用的是 align-items: center，
       品牌名这一整块按中线摆，所以字号调大也不会跑偏。
       内部再用 flex-start，让 ® 顶到文字的右上角。 */
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;

    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -.02em;
    color: var(--nav-fg);
}
.nav__brand:hover { text-decoration: none; }

/* ® 标：顶端对齐 + 略抬，落在品牌名右上角 */
.nav__brand .tm {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

/* ★ 品牌名里自绘的那个"闭口的 e"（字形定义在 index.html，用 <use> 复用）。
   尺寸全用 ex —— ex 就是当前字体的小写字母高度，
   所以它天然和相邻的 n / s / i / y 一样高；
   inline-block 的底边默认就落在基线上，不用手调位置。 */
.e-closed {
    display: inline-block;
    width: 1.08ex;
    height: 1ex;
    margin: 0 .02em;
}

/* 导航右侧的小猫（black rainbow cat.gif）：
   原图 473×473，这里只给高度、宽度按比例自适应 ——
   34px 比主栏矮一圈，不会把顶栏撑高、也不会被裁到。 */
.nav__cat {
    flex: none;
    display: block;

    height: 34px;
    width: auto;
    margin-left: var(--gap-s);
}

.nav__spacer { flex: 1; }

/* ---- 一级菜单 ---- */

.nav__menu {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.nav__item { position: relative; }

.nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;

    font-family: inherit;
    /* 字号、字重都提一档（原生 NavigationView 是 14px / 400）：
       14 → 16px，400 → 600，看着更实在。
       命中区高度 = 8 + 20 + 8 = 36px，仍在 48px 的主栏里，不会顶高顶栏。 */
    font-size: 16px;
    font-weight: 600;
    color: var(--nav-fg-2);

    background: transparent;
    border: 0;
    /* 原生不做圆角药丸底，方正的命中区 */
    border-radius: 0;
    cursor: pointer;
}

/* ★ 悬浮：没有任何动画、没有任何底色 ——
   只在底部亮一条 2px 的品牌蓝线。
   用 inset 阴影画：不占高度、不挤压布局、不触发重排；
   原来那套"圆角底 + 文字下划线 + 箭头旋转"三样全部去掉。 */
.nav__trigger:hover {
    color: var(--nav-fg);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--brand-60);
}

/* 下拉指示：静态的 ▾，不随悬浮旋转（没有任何动画） */
.nav__trigger::after {
    content: "▾";
    font-size: 10px;
    line-height: 1;
}

/* ---- 下拉面板（纯 CSS :hover 展开，不需要脚本） ---- */

.nav__panel {
    position: absolute;
    top: 100%;
    left: 0;

    display: none;
    min-width: 220px;

    /* ★ 面板内边距压到 4px、条目的上下内边距压到 5px：
       文字离窗口边更近，同样高度里能多显示几条。 */
    padding: 4px;

    background: var(--bg-1);
    border: 1px solid var(--stroke-2);
    /* ★ 按你的要求：去掉圆角，四角是方的 */
    border-radius: 0;
    box-shadow: var(--shadow-16);
    color: var(--fg-1);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel { display: block; }

.nav__panel a {
    display: block;
    padding: 5px 10px;

    font-size: 14px;
    color: var(--fg-2);
    border-radius: var(--radius-md);
}
.nav__panel a:hover {
    background: var(--bg-3);
    color: var(--fg-1);
    text-decoration: none;
}

.nav__panel-title {
    padding: 6px 10px 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-3);
}

/* ============================================================================
   按钮（Fluent 2 Button）
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 20px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;

    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;

    transition: background-color .1s ease, border-color .1s ease;
}

.btn--primary {
    color: var(--fg-on-brand);
    background: var(--brand-60);
}
.btn--primary:hover { background: var(--brand-70); text-decoration: none; }
.btn--primary:active { background: var(--brand-80); }

.btn--subtle {
    color: var(--fg-1);
    background: transparent;
    border-color: var(--stroke-1, #D1D1D1);
}
.btn--subtle:hover { background: var(--bg-3); text-decoration: none; }

/* 顶栏里的小按钮（白底深字，不跟随深色模式） */
.btn--nav {
    min-height: 34px;
    padding: 0 16px;
    font-size: 13px;

    color: var(--nav-bg);
    background: var(--nav-fg);
}
.btn--nav:hover { background: #000000; text-decoration: none; }

/* ============================================================================
   Hero：全宽区块 + 居中内容（EA 的大图 Hero 位，这里用渐变代替图片）
   ============================================================================ */

.hero {
    /* 上下留白收一些，把高度让给内容 —— 区块现在是一整屏，内容越大越饱满 */
    padding: 72px 0 64px;
    text-align: center;

    /* 中间区域渐变：左上角一抹品牌浅蓝，向右下淡出 */
    background:
        radial-gradient(120% 130% at 12% 0%, #D3E7F8 0%, rgba(211, 231, 248, 0) 62%),
        linear-gradient(155deg, #E9F3FB 0%, #F6FAFE 45%, #FFFFFF 100%);
    border-bottom: 1px solid var(--stroke-subtle);
}

.hero__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-70);
}

.hero__title {
    margin-top: var(--gap-m);

    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    line-height: 64px;
    letter-spacing: -.02em;
}

.hero__subtitle {
    max-width: 640px;
    margin: var(--gap-l) auto 0;

    font-size: 20px;
    line-height: 28px;
    color: var(--fg-2);
}

.hero__actions {
    display: flex;
    justify-content: center;
    gap: var(--gap-m);
    margin-top: var(--gap-2xl);
}

.hero__note {
    margin-top: var(--gap-l);
    font-size: 12px;
    line-height: 16px;
    color: var(--fg-3);
}

@media (prefers-color-scheme: dark) {
    .hero {
        background:
            radial-gradient(120% 130% at 12% 0%, #123049 0%, rgba(18, 48, 73, 0) 62%),
            linear-gradient(155deg, #0F2436 0%, #16293A 45%, #1F1F1F 100%);
    }
}

/* 留白状态：与原来的下方区块合并后是一整块渐变区域。
   ★ 用 min-height 撑出较大的高度（视觉上是一块宽裕的展示区） */
.hero--blank {
    position: relative;

    /* ★ 首屏占满：这里是页面第一屏，上面还压着「最上一栏」和「主栏」，
       两条都减掉，区块才正好铺满第一屏（顺带保证底部那个向下箭头不被顶出屏幕）。 */
    min-height: calc(100vh - var(--nav-height) - var(--util-height));
    min-height: calc(100dvh - var(--nav-height) - var(--util-height));

    /* 文字与产品图作为一整块在区域里垂直居中：
       原来它们贴在顶部，下面空一大片，重心整个偏高。 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 底部居中的"向下"图标 */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    color: var(--fg-2);
    border-radius: 999px;
    transition: background-color .15s ease, transform .15s ease;
}
.hero__scroll:hover {
    background: rgba(0, 0, 0, .06);
    text-decoration: none;
    transform: translateX(-50%) translateY(2px);
}

.icon--scroll {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url(/assets/icons/chevron_down_16_regular.svg);
    mask-image: url(/assets/icons/chevron_down_16_regular.svg);
}

/* 中间区域内部：左右两栏（左留白，右产品图） */
.hero__split {
    display: grid;
    /* 右侧产品图那一栏给多些：图更大，整屏更饱满 */
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: var(--gap-3xl);
    align-items: center;

    /* 左栏的标题与描述在本栏内水平居中 */
    text-align: center;
}

/* 右栏的产品图在本栏内居中（原来靠右贴边） */
.hero__right { display: flex; justify-content: center; }

.hero__image {
    display: block;
    width: 100%;
    height: auto;

    border-radius: var(--radius-xl);

    /* ★ 不加投影：这张图（笔记本样机）四周是透明的，
       box-shadow 只会按图片的矩形边界画 —— 会在笔记本外面显出一圈"假边框"。
       笔记本自带立体感，也不需要投影衬托。 */
    }

/* 左侧引导文案 */
.hero__lead-title {
    font-family: var(--font-display);
    font-size: 54px;
    font-weight: 600;
    line-height: 62px;
    letter-spacing: -.02em;
}

/* 标题里的 ®：缩到 0.38 倍，再按自身字号抬到右上角。
   ★ 两点都用 em：标题在窄屏会缩到 32px，® 会跟着等比缩小、抬升量也等比收，
     不会出现"小屏上 ® 掉到字腰上"这种跑位。 */
.hero__lead-title .tm {
    display: inline-block;
    margin-left: 2px;

    font-size: .38em;
    line-height: 1;

    transform: translateY(-1.05em);
}

.hero__lead-desc {
    margin-top: var(--gap-l);

    font-size: 20px;
    line-height: 30px;
    color: var(--fg-2);
}

/* ============================================================================
   下载按钮：黑底白字的长条按钮（形取自 Edge 那个 "Download" 按钮）
   —— 两端半圆、左边一枚官方 Fluent 下载图标；
      三个状态色取自 Fluent 2 的深色中性阶（静止 / 悬浮 / 按下）。
   ============================================================================ */

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    height: 44px;
    margin-top: var(--gap-2xl);
    padding: 0 26px;

    /* ★ 字体：微软 Fluent 原生字体栈（Windows 上就是 Segoe UI Variable Text，
         与 WinUI 控件用的是同一支）。这里显式写出来、不靠继承 ——
         这一块的上层有 .hero__lead-title 这类用 --font-display 的元素，
         靠继承会拿到 Display 字形（小字号下比 Text 更松、不够精致）。 */
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;          /* Semibold —— WinUI 按钮标签用的就是这一档 */
    line-height: 1;
    letter-spacing: .01em;     /* 一丁点字距：16px 半粗的拉丁文更"透气" */

    /* ★ 清晰度的关键几行（与 body 上那套同源，这里再钉一次，
         免得按钮上的字体被重置后丢掉这些设置）：
           不合成粗体 —— 缺字重时浏览器会描边加粗，中文直接糊；
           灰度抗锯齿 —— 笔画边缘更干净，与 Fluent 的细字重更搭；
           光学尺寸自动 —— Segoe UI Variable 会按字号微调字距与笔画。 */
    font-synthesis: none;
    font-optical-sizing: auto;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    color: #FFFFFF;
    background: #1A1A1A;
    border-radius: 999px;      /* 长条两端是半圆 */

    /* ★ 它现在是 <button>（不是 <a href>）：这样鼠标悬停时浏览器左下角
         不会浮出文件地址。下面这几行是把 <button> 浏览器的默认外观清掉 ——
         不清的话会多出 2px 边框、系统按钮底色、Arial 字体、默认光标，
         与原来作为链接时的样子对不上。 */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;

    /* ★ 悬停时稍微变大、移开恢复：用 transform 缩放，不改宽高 ——
         不触发重排，也不会把旁边的元素挤走（改 width/height 会）。
         ★ 刻意不加 will-change：那会把按钮提升成独立图层，
           缩放时文字是"先栅格化再放大"，反而发虚。 */
    transform: scale(1);
    transform-origin: center;
    transition: background .12s ease,
                transform .18s cubic-bezier(.2, .9, .3, 1);
}

/* 悬浮：底色亮一档 + 稍微变大（1.045 ≈ 44px 长到 46px） */
.btn-download:hover {
    background: #2B2B2B;
    color: #FFFFFF;
    text-decoration: none;
    transform: scale(1.045);
}
/* 按下：再亮一档，并从放大态收回来一点 —— 有"按下去"的手感 */
.btn-download:active { background: #3A3A3A; transform: scale(1.01); }

/* 跟随系统的"减少动态效果"：不放大、不缩放，只保留底色变化 */
@media (prefers-reduced-motion: reduce) {
    .btn-download { transition: background .12s ease; }
    .btn-download:hover,
    .btn-download:active { transform: none; }
}

.btn-download__icon {
    flex: none;
    width: 20px;
    height: 20px;
}

@media (prefers-color-scheme: dark) {
    /* 深色模式下背景本来就是深的，给黑按钮描一道浅边，免得糊成一片 */
    .btn-download { border: 1px solid rgba(255, 255, 255, .18); }
}

@media (max-width: 900px) {
    .hero__split { grid-template-columns: minmax(0, 1fr); }

    /* 小屏改成上下排：文字在上、图在下，两块都保留 */
    .hero__lead-title { font-size: 32px; line-height: 40px; }
    .hero__lead-desc { font-size: 16px; line-height: 24px; }
}

/* ============================================================================
   产品图展示区：欢迎区域正下方的一幅整宽产品图
   —— 宽度始终跟随 .shell（页面最大宽 1200，两侧留白自动跟进），
      高度按图片自身比例算（height:auto），所以窗口放大缩小都不会拉伸变形、
      也不会被裁掉，小屏时只缩不裁。
   ============================================================================ */

.shot {
    /* ★ 占满一屏：滚动时一屏正好看到一个区块。
       高度减掉常驻顶栏（--nav-height），区块底边才不会被顶栏压住；
       dvh 是"动态视口高度"，手机浏览器地址栏收起/展开时也准。 */
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100dvh - var(--nav-height));

    /* 内容在整屏里垂直居中 —— 区块变高以后，不该让内容贴在顶上 */
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: var(--gap-4xl) 0;
    background: var(--bg-1);
    border-bottom: 1px solid var(--stroke-subtle);
}

/* 透视：数值越小，纵深越夸张；1800px 是比较克制的立体感 */
.showcase {
    perspective: 1800px;

    /* ★ 这个框同时充当裁切边界：滑出去的那张图在这里就被裁掉，
       不会有半张图飘到页面两侧、把整页撑宽（横向滑块的根源）。
       裁切边界比图片本身外扩 24px、下方多留 32px —— 图片外那圈投影才有地方画；
       再用负外边距把多出来的这圈空间从排版里抵掉，
       所以卡片的位置和大小与加这层裁切之前完全一致。 */
    overflow: hidden;
    padding: 4px 24px 32px;
    margin: -4px -24px -32px;
}

/* 区块左上角那段说明文字（3D 轮播区 与 WinUI 3 区共用同一套排版）：
   跟着 .shell 左边缘起排，和下面的内容对齐 */
.showcase__caption,
.trio__caption {
    max-width: 900px;
    margin-bottom: var(--gap-l);

    font-size: 20px;
    line-height: 30px;
    color: var(--fg-2);
}

/* ============================================================================
   WinUI 3 区：三张图平铺在同一区域里
   ============================================================================ */

.trio {
    /* 和 3D 轮播区一样占满一屏，内容垂直居中 */
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100dvh - var(--nav-height));

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: var(--gap-4xl) 0;
    background: var(--bg-1);
    border-bottom: 1px solid var(--stroke-subtle);
}

.trio__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-xl);
}

.trio__item { margin: 0; }

.trio__image {
    display: block;
    width: 100%;
    height: auto;          /* 跟着画框等比缩放，三张始终一样大 */

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-8);
}

/* 卡片画框：两张图共用一个框（1920 × 1032 = 1.86）。
   宽度跟着 .shell 走，所以窗口放大缩小只等比缩放、不变形。 */
.showcase__stage {
    position: relative;
    aspect-ratio: 1920 / 1032;

    /* ★ 画框宽度既要"尽量大"，又不能高过一屏：
       高度 = 宽度 ÷ 1.86，所以把宽度按"这一屏去掉顶栏、留白、说明文字之后还剩多少"
       反算出来。宽屏上取满 .shell 的宽度，屏不够高时按高度让一步 ——
       于是区块始终一屏放得下，图也始终尽可能大。 */
    max-width: max(640px, calc((100vh - var(--nav-height) - 220px) * 1.86));
    max-width: max(640px, calc((100dvh - var(--nav-height) - 220px) * 1.86));
    margin-inline: auto;

    /* 让下面两层能各自在 Z 轴上进退（近大远小） */
    transform-style: preserve-3d;
}

/* 两层重叠在同一位置，各自跑同一套"推出 / 推入"动画 */
.showcase__face {
    position: absolute;
    inset: 0;
    margin: 0;

    animation: showcase-push 12s cubic-bezier(.45, 0, .25, 1) infinite;
    will-change: transform, opacity;
}

/* ★ 第二张整体延后半轮：于是永远是一张正往外走、另一张正往里来 ——
   这就是"一张推着一张"的效果（同一套动画，只差半个周期）。 */
.showcase__face--back { animation-delay: -6s; }

.showcase__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;     /* 兜底：两张图比例万一不同也不拉伸 */

    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-16);
}

/* 节奏（一轮 12 秒）：
   0–40%   停在正中
   40–50%  向左推出画面（同时后退、侧转一点 —— 立体感就在这里）
   50–90%  停在画面右侧外面（透明度已是 0，换位的瞬间看不见）
   90–100% 从右侧推回正中                                            */
@keyframes showcase-push {
    0%, 40%  { transform: translate3d(0, 0, 0) rotateY(0deg);           opacity: 1; }
    50%      { transform: translate3d(-104%, 0, -170px) rotateY(15deg);  opacity: 0; }
    50.01%   { transform: translate3d(104%, 0, -170px) rotateY(-15deg);  opacity: 0; }
    90%      { transform: translate3d(104%, 0, -170px) rotateY(-15deg);  opacity: 0; }
    100%     { transform: translate3d(0, 0, 0) rotateY(0deg);            opacity: 1; }
}

@media (max-width: 900px) {
    .shot { padding: var(--gap-2xl) 0; }
    .showcase__caption,
    .trio__caption { font-size: 15px; line-height: 24px; }
    .showcase__image { border-radius: var(--radius-xl); }

    .trio { padding: var(--gap-2xl) 0; }

    /* 窄屏：三张并排会小到看不清，改成一列铺满 */
    .trio__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 系统里开了「减少动态效果」就静止在第一张，不做推出 */
@media (prefers-reduced-motion: reduce) {
    .showcase__face { animation: none; }
    .showcase__face--back { display: none; }
}

/* ============================================================================
   Section：EA 首页就是若干个这种区块叠起来
   ============================================================================ */

.section { padding: var(--gap-4xl) 0; }
.section--alt { background: var(--bg-2); }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-l);
    margin-bottom: var(--gap-xl);
}

.section__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
}

.section__link { font-size: 14px; font-weight: 600; }

/* ---- 横向卡片行（对应 EA 的轮播：内容溢出时横向滚动） ---- */

.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 320px);
    gap: var(--gap-l);

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--gap-m);
}
.rail > * { scroll-snap-align: start; }

/* ---- 卡片 ---- */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);

    padding: var(--gap-xl);

    background: var(--bg-1);
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);

    transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow-8); transform: translateY(-2px); }

.card__title { font-size: 20px; line-height: 28px; font-weight: 600; }
.card__desc { font-size: 14px; line-height: 20px; color: var(--fg-3); }

/* ---- 三列/两列网格 ---- */

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-xl);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- 条目列表（对应 EA 的新闻列表） ---- */

.list { display: grid; gap: 0; }

.list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-l);

    padding: var(--gap-l) 0;
    border-bottom: 1px solid var(--stroke-subtle);
}
.list__item:last-child { border-bottom: 0; }
.list__item:hover .list__title { color: var(--brand-60); }

.list__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fg-1); }
.list__meta { flex: none; font-size: 12px; color: var(--fg-3); }

/* ---- 居中 CTA（对应 EA 的报告区块） ---- */

.cta {
    padding: var(--gap-3xl) var(--gap-xl);

    text-align: center;

    background: var(--bg-1);
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
}

.cta__title { font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.cta__desc { margin-top: var(--gap-s); font-size: 14px; color: var(--fg-3); }
.cta__actions { margin-top: var(--gap-xl); }

/* ---- 规格表（两列：名字 / 值） ---- */

.spec { display: grid; gap: 0; }

.spec__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-l);

    padding: 12px 0;
    border-bottom: 1px solid var(--stroke-subtle);
}
.spec__row:last-child { border-bottom: 0; }

.spec__key { font-size: 14px; color: var(--fg-2); }
.spec__val { font-size: 14px; font-weight: 600; }

/* ============================================================================
   深空灰区域：彩色光晕 + 细腻噪点 + 毛玻璃卡片
   ----------------------------------------------------------------------------
   ★ 这块是**固定深色**，不跟随系统深浅色 —— 它的观感就靠暗底上的彩色光晕。
   ★ 里面没有任何图片素材：光晕是 CSS 渐变 + filter:blur，
     噪点是浏览器用 SVG 湍流滤镜现场算出来的纹理。
   ============================================================================ */

.glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* 高度压得很矮：里面只有一行字 */
    padding: 40px 0;

    background: #000000;   /* 纯黑 */
}

/* 大范围高斯模糊的彩色光晕 */
.glow__aura {
    position: absolute;
    inset: -34%;

    background:
        radial-gradient(38% 62% at 20% 44%, rgba(92, 106, 245, .55) 0%, rgba(92, 106, 245, 0) 70%),
        radial-gradient(34% 58% at 78% 28%, rgba(0, 198, 188, .42) 0%, rgba(0, 198, 188, 0) 70%),
        radial-gradient(30% 52% at 56% 84%, rgba(212, 88, 198, .40) 0%, rgba(212, 88, 198, 0) 72%);

    filter: blur(72px);
    pointer-events: none;
}

/* 细腻噪点（SVG 湍流滤镜生成的纹理，不是图片素材） */
.glow__noise {
    position: absolute;
    inset: 0;

    opacity: .18;
    mix-blend-mode: overlay;
    pointer-events: none;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* 前景：**只有文字，没有容器** —— 不套背景、边框、圆角，也没有毛玻璃 */
.glow__text {
    position: relative;
    z-index: 1;

    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #FFFFFF;
    text-align: center;
}

@media (max-width: 900px) {
    .glow { padding: 32px 0; }
    .glow__text { font-size: 20px; letter-spacing: .04em; }
}

/* ============================================================================
   页脚
   ============================================================================ */

.footer {
    /* ★ 页脚自成一色，不跟随页面底色（深色模式下也一样是蓝底白字）：
       和上面的浅色内容区形成一条明确的分界，这是参考图那种"整块色块"的关键。 */
    --footer-bg: #0F548C;                 /* 主区：品牌深蓝（brand-80） */
    --footer-bg-deep: #0B4070;            /* 最下一条：再深一档 */
    --footer-fg: #FFFFFF;
    --footer-fg-dim: rgba(255, 255, 255, .82);
    --footer-rule: rgba(255, 255, 255, .28);

    background: var(--footer-bg);
    color: var(--footer-fg);
}

.footer a { color: inherit; }
.footer a:hover { color: var(--footer-fg); }

/* 键盘焦点框：深底上原来的深色描边几乎看不见，这里换成白色 */
.footer :focus-visible { outline-color: var(--footer-fg); }

.footer__main { padding: var(--gap-3xl) 0 var(--gap-2xl); }

/* ---- 品牌 ---- */
.footer__logo {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;

    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -.01em;
}

/* 页脚品牌名的 ®：原来是 11px + 九成透明度，在深蓝底上发虚 ——
   放大一档、去掉透明度，笔画实了才看得清 */
.footer__logo .tm { font-size: 13px; line-height: 1; margin-top: 2px; }

/* ---- 六列链接：等宽六列，窄屏自动折成三列 / 两列 ---- */
.footer__cols {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gap-2xl) var(--gap-xl);
    margin-top: var(--gap-2xl);
}

.footer__col-title {
    margin-bottom: var(--gap-m);

    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.footer__col-list li { margin-bottom: var(--gap-s); }

.footer__col-list a {
    font-size: 13px;
    line-height: 18px;
    color: var(--footer-fg-dim);
}
.footer__col-list a:hover { color: var(--footer-fg); }

/* ---- 法务区上方那条细线 ---- */
.footer__rule {
    height: 1px;
    margin: var(--gap-2xl) 0;
    background: var(--footer-rule);
}

/* ---- 法务区 ---- */
.footer__legal-brand {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;

    font-size: 15px;
    font-weight: 600;
}
/* 法务区那个 （最下面的 hensieye）：原来只有 9px，几乎糊成一个点 ——
   提到 11px 并去掉透明度，和上面品牌名的 ® 观感一致 */
.footer__legal-brand .tm { font-size: 11px; line-height: 1; margin-top: 0; }

.footer__legal-line {
    margin-top: var(--gap-m);
    font-size: 12px;
    line-height: 18px;
    color: var(--footer-fg-dim);
}

/* ---- 最下一条：语言（左）+ 政策链接（右） ---- */
.footer__bar {
    background: var(--footer-bg-deep);
    border-top: 1px solid var(--footer-rule);
}

.footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-l);
    flex-wrap: wrap;

    min-height: 52px;
    padding-top: var(--gap-m);
    padding-bottom: var(--gap-m);
}

.footer__locale {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-s);
    font-size: 13px;
}

/* 复用现成的 chevron 图标，转 90° 就是语言条右侧那个「>」 */
.icon--locale {
    flex: none;
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);

    -webkit-mask-image: url(/assets/icons/chevron_down_16_regular.svg);
    mask-image: url(/assets/icons/chevron_down_16_regular.svg);
}

.footer__bar-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ★ 页脚最下一条：原来左边是「中国大陆 (简体中文)」那一条，已按用户要求删除，
   现在只剩右侧的政策链接。`.footer__bar-inner` 用的是 space-between，只剩一个
   子元素时它会贴到左边 —— 用 margin-left:auto 把链接继续顶在右边。 */
.footer__bar-links { margin-left: auto; }

@media (max-width: 620px) {
    /* 窄屏本来就改成左对齐（见上面 .footer__bar-inner 的媒体查询），这里跟着放开 */
    .footer__bar-links { margin-left: 0; }
}

.footer__bar-links a { font-size: 12px; color: var(--footer-fg-dim); }
.footer__bar-links a:hover { color: var(--footer-fg); }

/* 相邻两条之间加一道细竖线（参考图里就是这样分隔的） */
.footer__bar-links a + a::before {
    content: "|";
    margin: 0 var(--gap-m);
    opacity: .5;
}

@media (max-width: 1100px) {
    .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__bar-inner { justify-content: flex-start; }
    .footer__logo { font-size: 22px; line-height: 28px; }
}

/* ============================================================================
   响应式
   ============================================================================ */

@media (max-width: 900px) {
    .nav__menu { display: none; }

    .hero { padding: 64px 0 56px; }
    .hero__title { font-size: 36px; line-height: 44px; }
    .hero__subtitle { font-size: 16px; line-height: 24px; }

    .section { padding: var(--gap-3xl) 0; }
    .section__title { font-size: 24px; line-height: 32px; }

    .grid, .grid--2 { grid-template-columns: minmax(0, 1fr); }

    .hero__actions { flex-direction: column; align-items: stretch; }
}

/* ---- picture（webp + png fallback 的包装）----
   picture 默认按行内元素排版，里面 img 的 width:100% 会失去参照；
   显式块级化后，布局与未包装时完全一致。 ---- */
picture { display: block; }

/* ============================================================================
   原生 Fluent —— 第 2 段（2026-10 追加）
   纯 CSS/JS，不依赖任何框架。分四块：
     1) 文字：精密度与清晰度（字体栈、光学尺寸、字距、渲染方式）
     2) 背景：Mica / Acrylic 质感（多层渐变 + 细颗粒噪点 + 极慢浮动）
     3) 用户按钮
     4) 账户窗口（原生 <dialog> 模态：长方形窗口 + 长条按钮）
   ============================================================================ */

/* ---------- 1) 文字 ------------------------------------------------ */

:root {
    /* 原生 Fluent 字体栈：Windows 用 Segoe UI Variable（带光学尺寸轴，字越大小细节越松），
       其它系统退回各自的系统字体；中文单独指定，避免落到宋体这类衬线体。 */
    --font-sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI",
                 system-ui, -apple-system, "SF Pro Text", "Microsoft YaHei UI",
                 "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
                    system-ui, -apple-system, "Microsoft YaHei UI", "PingFang SC", sans-serif;

    /* 字阶：1.2 倍左右的比例，相邻层级拉开，层级感不糊 */
    --fs-caption: 12px;
    --fs-body: 15px;
    --fs-subtitle: 18px;
    --fs-title: 24px;
    --fs-display: 34px;
}

html {
    -webkit-text-size-adjust: 100%;      /* 横屏时手机浏览器不要擅自放大 */
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;

    /* ★ 清晰度的关键三件事：
       1) 关掉合成粗体/斜体 —— 缺字重时浏览器会"描边加粗"，中文直接糊掉；
       2) 灰度抗锯齿 —— 与 Fluent 的细字重更搭，笔画边缘更干净；
       3) 光学尺寸 + 字距调整自动生效。 */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: tabular-nums;    /* 数字等宽：版本号/表格不会左右跳 */
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;                      /* Fluent 标题是 SemiBold，不是 Bold */
    text-wrap: balance;                    /* 标题尽量均分两行，不留孤字 */
    letter-spacing: -0.01em;               /* 大字号收紧一点，更精密 */
}

/* 中文排印习惯：行高比西文松一点，且不用负字距 */
:lang(zh-CN) h1, :lang(zh-CN) h2, :lang(zh-CN) h3, :lang(zh-CN) h4 {
    letter-spacing: 0;
    line-height: 1.35;
}
:lang(zh-CN) p, :lang(zh-CN) li { line-height: 1.85; text-wrap: pretty; }

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-subtitle); }

/* 小字（页脚、说明）：行高放大，密集段落不发灰 */
small, .legal__foot, .footer__bar, .legal__meta {
    font-size: var(--fs-caption);
    line-height: 1.6;
    letter-spacing: .005em;
}

/* 焦点圈：只有键盘操作时出现，用品牌色、够粗够清楚 */
:focus-visible {
    outline: 2px solid var(--brand-60, #0F6CBD);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------- 2) 背景：Mica / Acrylic 质感 --------------------------- */

/* 页面底色：三层叠加
     · 最底：极浅的纵向渐变（上暖下冷，"光从上方来"）
     · 中间：两团径向光晕（左上品牌蓝、右上冷蓝白）
     · 最上：细颗粒噪点 —— Fluent Mica 的关键。
             纯渐变在低亮度屏幕上会出现色带，加一层噪点后过渡干净、有材质。 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 8% 0%, rgba(15, 108, 189, .16) 0%, rgba(15, 108, 189, 0) 60%),
        radial-gradient(46% 38% at 100% 8%, rgba(120, 170, 255, .14) 0%, rgba(120, 170, 255, 0) 62%),
        linear-gradient(168deg, #F7FAFD 0%, #F2F6FB 46%, #EDF2F9 100%);
    animation: hsAurora 34s ease-in-out infinite;
}

/* 噪点层（内联 SVG feTurbulence，不额外请求图片） */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
    background-size: 160px 160px;
}

/* 极慢的光晕浮动：幅度小于 2%，只为"活"一点，不干扰阅读 */
@keyframes hsAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-1.2%, 1%, 0) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* 系统开了「减少动态效果」就完全静止（无障碍要求，也让低端机省电） */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* 顶部两条栏都加 Acrylic，但颜色各自保持原样 —— 不要合并成一条规则：
     · 最上方那条是**深色**（原设计 #1A1A1A），左侧公司名、右侧用户按钮；
     · 下面那条是**浅色**（白/半透明白），logo + 导航 + 小猫。
   一深一浅是刻意的对照，把 utilbar 也刷成浅色会让页面顶部失去层次。 */
.utilbar {
    background: rgba(26, 26, 26, .86) !important;
    color: #FFFFFF;
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
}
.nav {
    background: rgba(252, 253, 255, .72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* ---------- 3) 用户按钮 -------------------------------------------- */

/* 全站栏里都用它（主页的账户位置 + 子页面导航右侧）：
   方形图标按钮，Fluent 控件高度，悬停轻微提亮、按下轻微缩小。 */
.hs-userbtn {
    appearance: none;
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    background: rgba(255, 255, 255, .66);
    color: inherit;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.hs-userbtn:hover { background: rgba(255, 255, 255, .95); border-color: rgba(0, 0, 0, .16); }
.hs-userbtn:active { transform: scale(.96); background: rgba(240, 244, 249, .95); }
.hs-userbtn svg { display: block; }

/* 放在最上方那条**深色**栏里时用这个变体：浅色描边 + 白色图标，
   否则浅底按钮压在黑条上会像一块补丁。
   ★ 这里是**正圆**（border-radius: 50%）—— 与 WinUI 标题栏上的账户按钮同一种形态：
     28×28 的圆、细描边、悬停提亮、按下轻微缩小；图标占圆直径的 18/28（约 0.64，
     和 Fluent 圆钮里图标的比例一致，看起来不挤也不空）。
     改回方角的话，把 border-radius 换成 var(--radius-md) 即可。 */
.hs-userbtn--dark {
    width: 28px;
    height: 28px;
    margin-left: 0;
    padding: 0;
    border-radius: 50%;
    border-color: rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .10);
    color: #FFFFFF;
}
.hs-userbtn--dark:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .40); }
.hs-userbtn--dark:active { background: rgba(255, 255, 255, .30); }
.hs-userbtn--dark svg { width: 18px; height: 18px; }

/* 已登录：按钮里显示**头像图片**（动画 WebP，圆形裁切）——
   尺寸与未登录时的图标按钮一致，栏高不变；头像本体用 object-fit: cover 铺满。 */
.hs-userbtn--avatar {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;          /* 圆形 —— 想改回方角就把这行删掉 */
    overflow: hidden;
}
/* 深色栏里登录后换成头像：直径与未登录时的圆形图标按钮**完全一致**（28px），
   这样登录前后按钮大小不变，右侧那条边线不会跳动。 */
.hs-userbtn--avatar.hs-userbtn--dark { width: 28px; height: 28px; border-color: rgba(255, 255, 255, .35); }
.hs-userbtn__avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 3.5) 同意提示卡片（右下角）--------------------------
   与账户窗口同一套视觉：长方形、Acrylic、长条按钮。
   位置上贴右下角，手机上铺满底部；出现时从下方滑入。 */
.hs-notice {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;                       /* 高于两条栏，低于原生 <dialog> 的顶层 */
    width: min(360px, calc(100vw - 32px));
    padding: 16px 16px 14px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 6px;
    background: rgba(252, 253, 255, .95);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .20), 0 2px 8px rgba(0, 0, 0, .07);
    color: #1B1B1B;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}
.hs-notice--in { opacity: 1; transform: none; }

.hs-notice__head { display: flex; align-items: flex-start; gap: 10px; }
.hs-notice__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; }
.hs-notice__close {
    appearance: none; margin-left: auto; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 4px; background: transparent; color: #444; cursor: pointer;
}
.hs-notice__close:hover { background: rgba(0, 0, 0, .06); }

.hs-notice__text { margin: 8px 0 14px; font-size: 13px; line-height: 1.7; color: #2B2B2B; }

/* 两个按钮等宽并排：同意与拒绝一样显眼、一样一次点击（不做"藏拒绝"） */
.hs-notice__acts { display: flex; gap: 8px; }
.hs-notice__btn {
    appearance: none; flex: 1; min-height: 38px;
    border: 1px solid rgba(0, 0, 0, .16); border-radius: 4px;
    background: #fff; color: #1B1B1B;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.hs-notice__btn:hover { background: #F3F6FB; border-color: rgba(0, 0, 0, .28); }
.hs-notice__btn--primary { background: var(--brand-60, #0F6CBD); border-color: transparent; color: #fff; }
.hs-notice__btn--primary:hover { background: #0B5AA0; }

.hs-notice__more { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #555; }
.hs-notice__more a { color: var(--brand-60, #0F6CBD); text-decoration: none; }
.hs-notice__more a:hover { text-decoration: underline; }

/* 窄屏：铺满底部，按钮不挤在一起 */
@media (max-width: 520px) {
    .hs-notice { right: 8px; left: 8px; bottom: 8px; width: auto; }
}

/* ---------- 3.8) 反馈表单（白栏「反馈」里的两个页面共用）------------
   要求是"输入区域大、间隔小、能看见更多内容"：
     · 标签贴紧输入框（3px），字段之间只留 6px —— 不再是设置页那种大留白
     · 描述类输入给足高度（240px 起），可纵向拖拽
     · 行宽较宽（900px），一行里能放两个短字段 */
/* ★ 居中：两个反馈页（软件问题 / 网站问题）的整块表单在页面中间，
   而不是像其它说明页那样贴着左侧的商标起排。
   —— 里面每个字段的文字仍然左对齐（表单该有的样子）。 */
.fb { color: #000; max-width: 900px; margin: 0 auto; padding: 16px var(--bar-pad-x, 24px) 40px; }
.fb h1 { font-size: 24px; margin: 6px 0 2px; }
.fb__lead { font-size: 13.5px; line-height: 1.6; color: #333; margin: 0 0 12px; }

.fb__form { display: block; }
.fb__row { display: flex; gap: 8px; }
.fb__row > .fb__field { flex: 1; min-width: 0; }
.fb__field { margin: 0 0 6px; }
.fb__label { display: block; font-size: 12.5px; font-weight: 600; margin: 0 0 3px; }
.fb__hint { font-weight: 400; color: #555; }

.fb__input, .fb__area {
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: 14.5px; line-height: 1.6; color: #000;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .20);
    border-bottom: 1px solid rgba(0, 0, 0, .45);
    border-radius: 4px;
    padding: 7px 10px;
}
.fb__input { min-height: 36px; }
.fb__area { min-height: 240px; resize: vertical; }      /* ★ 大输入区 */
.fb__area--short { min-height: 120px; }
.fb__input:focus, .fb__area:focus {
    outline: none;
    border-color: var(--brand-60, #0F6CBD);
    box-shadow: inset 0 -2px 0 var(--brand-60, #0F6CBD);
}

.fb__acts { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.fb__submit {
    appearance: none; min-height: 42px; min-width: 160px; padding: 0 20px;
    border: 1px solid transparent; border-radius: 4px;
    background: var(--brand-60, #0F6CBD); color: #fff;
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background .12s ease;
}
.fb__submit:hover { background: #0B5AA0; }
.fb__submit:disabled { opacity: .6; cursor: default; }
.fb__note { font-size: 12.5px; color: #555; }

.fb__msg { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; min-height: 20px; }
.fb__msg--err { color: #B4232A; }
.fb__msg--ok { color: #0F7B0F; }

/* 提交成功后的面板：把表单整块换掉，给一句明确的回执 */
.fb__done { display: none; border: 1px solid rgba(15, 123, 15, .35); border-radius: 6px;
            padding: 14px 16px; margin-top: 4px; }
.fb__done--show { display: block; }
.fb__done h2 { font-size: 16px; margin: 0 0 4px; }
.fb__done p { font-size: 13.5px; line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
    .fb__row { display: block; }
    .fb__area { min-height: 180px; }
}

/* ---------- 4) 账户窗口（原生 <dialog>）---------------------------- */

/* 长方形窗口：不做大圆角、不做药丸；按钮是整条长条。 */
.hs-dialog {
    width: min(400px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 6px;                       /* 长方形，只收一点点边 */
    background: rgba(252, 253, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08);
    color: #1B1B1B;
}
.hs-dialog::backdrop {
    background: rgba(16, 22, 32, .38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
@keyframes hsDialogIn {
    from { opacity: 0; transform: translateY(8px) scale(.995); }
    to   { opacity: 1; transform: none; }
}
.hs-dialog[open] { animation: hsDialogIn .16s cubic-bezier(.2, .9, .3, 1); }

/* 贴着用户按钮出现（像下拉面板），而不是屏幕正中：
     · 这里只负责**取消居中** —— <dialog> 默认用 margin:auto 居中，改成 margin:0 后
       坐标完全交给 JS（按按钮的 getBoundingClientRect 算 top/left 写进 style）。
     · 仍然是模态（showModal）：ESC 关闭、点遮罩关闭、焦点圈定、背景惰性都保留。
     · 出现方向是"按钮的左下方"：右边缘与按钮右边缘对齐，所以视觉上是从按钮往左展开。 */
.hs-dialog--anchored {
    position: fixed;
    margin: 0;
    animation: hsDialogDrop .16s cubic-bezier(.2, .9, .3, 1);
}
@keyframes hsDialogDrop {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

.hs-dialog__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px 12px;
}
.hs-dialog__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; }
.hs-dialog__sub { margin: 4px 0 0; font-size: 12.5px; color: #5D5D5D; }

.hs-dialog__close {
    appearance: none;
    margin-left: auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 4px; background: transparent; color: #444;
    cursor: pointer;
}
.hs-dialog__close:hover { background: rgba(0, 0, 0, .06); }

.hs-dialog__body { padding: 4px 20px 20px; }
.hs-dialog__divider { height: 1px; background: rgba(0, 0, 0, .08); margin: 0 0 16px; }

/* 长条按钮：整行宽、高度统一 40px（Fluent 控件高度） */
.hs-btnbar {
    appearance: none;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 4px;
    background: rgba(255, 255, 255, .86);
    color: #1B1B1B;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.hs-btnbar + .hs-btnbar { margin-top: 10px; }
.hs-btnbar:hover { background: #fff; border-color: rgba(0, 0, 0, .18); }
.hs-btnbar:active { transform: scale(.995); background: rgba(240, 244, 249, .95); }
.hs-btnbar__hint { margin-left: auto; font-size: 12px; font-weight: 400; color: #6B6B6B; }

/* 顶部栏「扫码登录」按钮（2026-10 新增）：与用户按钮并排，同一个观感。
   ★ 为什么不复用 .hs-userbtn：那个类会被 js/user-auth.js 的"登录后换成头像"处理，
     而这个按钮要一直保留自己的二维码图标（见 user-auth.js 的 paintQrButton）。
   ★ 它是**登录之后**才由脚本插进来的（用户要求："登录后网页上方才会出现扫描图标"）。 */
/* ★★ 第一栏（.utilbar）里的圆形图标按钮：**统一 28×28**，与右边的「用户」按钮一模一样。
   ----------------------------------------------------------------------------
   2026-10-13 按用户要求统一：原来「扫码」是 36×36、「用户」是 28×28，
   两个并排一大一小，看着就是"没对齐"。现在三个（学生端 / 扫码 / 用户）
   尺寸、描边、悬停反馈完全同一套：
       .hs-utilbtn（学生端，模板里的 <a>）
       .hs-qrbtn   （扫码，登录后由 js/user-auth.js 插进来）
       .hs-userbtn.hs-userbtn--dark（用户）
   ★ 三者之间**不加额外 margin**，只靠 .utilbar__inner 的 flex gap 排开 ——
     这样不管登录没登录（扫码按钮在有/无之间切换），间距始终是一致的。
   ============================================================================ */
.hs-qrbtn,
.hs-utilbtn {
    appearance: none;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.hs-qrbtn svg,
.hs-utilbtn svg { width: 18px; height: 18px; display: block; }

/* 第一栏里按钮旁边的**文字标签**（目前只有「学生端」用它）：
   深色栏里的浅灰小字，只为让入口一眼能认出来 —— 它本身不是按钮，
   按钮仍然是 28×28（与扫码 / 用户按钮等大，不受这段影响）。 */
.utilbar__label {
    flex: none;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.hs-qrbtn:hover,
.hs-utilbtn:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .40); }
.hs-qrbtn:active,
.hs-utilbtn:active { transform: scale(.97); }

/* 首次访问的引导气泡：箭头指着右上角那个用户按钮（见 js/user-auth.js 的 showAuthHint）
   ★ 它是 position:fixed 挂在 body 上的一小块，不是顶部栏里的元素 ——
     顶部栏那一整块由 tools/sync_header.py 管，改那里会被下次同步覆盖。 */
.hs-hint {
    position: fixed;
    z-index: 1200;
    max-width: 300px;
    padding: 14px 16px 12px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    text-align: left;
}

/* 箭头：一个旋转 45° 的小方块，只画朝上的两条边 —— 看起来就是"指向上面那个按钮" */
.hs-hint__arrow {
    position: absolute;
    top: -7px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, .10);
    border-top: 1px solid rgba(0, 0, 0, .10);
    transform: rotate(45deg);
}

.hs-hint__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1B1B1B; }
.hs-hint__text { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: #3A3A3A; }
.hs-hint__text b { color: var(--brand-60, #0F6CBD); }

.hs-hint__ok {
    appearance: none;
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: var(--brand-60, #0F6CBD);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.hs-hint__ok:hover { background: #0B5AA0; }

/* ============================================================================
   触摸屏（教室一体屏）可用性 —— 那台机器**只有触屏、没有鼠标**
   ----------------------------------------------------------------------------
   ★ 只做两件事，不改视觉风格：
     ① 下拉菜单原来只靠 :hover 展开 —— 触屏上永远打不开（手指点不出 hover）。
        这里让它另外两种方式也能开：
          · .is-open：脚本点出来的（见 js/nav-touch.js）；
          · :focus-within：键盘 Tab 到标题时也开。
     ② 指针是"粗的"（手指）时，把可点区域抬到 44px —— 手指点得准的下限。
   ============================================================================ */

/* ① 下拉菜单：与 :hover 那条**等效**的一套（多写几项是为了盖住各种实现方式：
      display / visibility / opacity / pointer-events / transform 都可能被用到） */
.nav__item.is-open .nav__panel,
.nav__item:focus-within .nav__panel {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* ② 手指点的东西：至少 44px 高（WinUI/人机交互的通用下限） */
@media (pointer: coarse) {
    .nav__trigger,
    .nav__panel a,
    .footer__bar-links a,
    .footer__col-list a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .nav__panel a {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 用户按钮（登录入口）在触屏上抬到 40×40：原来 28×28 手指点不准 */
    .hs-userbtn {
        width: 40px;
        height: 40px;
    }

    .hs-qrbtn {
        width: 40px;
        height: 40px;
    }
}

/* 主按钮：品牌蓝实心（登录）；次按钮保持中性（注册账户） */
.hs-btnbar--primary {
    border-color: transparent;
    background: var(--brand-60, #0F6CBD);
    color: #fff;
}
.hs-btnbar--primary:hover { background: #0B5AA0; border-color: transparent; }
.hs-btnbar--primary .hs-btnbar__hint { color: rgba(255, 255, 255, .82); }

.hs-dialog__foot { padding: 0 20px 18px; font-size: 12px; color: #6B6B6B; line-height: 1.6; }

@media (max-width: 480px) {
    .hs-dialog { width: calc(100vw - 24px); }
}

/* ============================================================================
   以下样式原本内联在各个页面里，2026-10 安全加固时集中搬到这里 ——
   因为 CSP 用 style-src 'self'，页面里的 <style> 会被浏览器忽略。
   ============================================================================ */

/* ---- 来自 about.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
  .legal h1 { font-size: 30px; margin: 26px 0 6px; }
  .legal h2 { font-size: 18px; margin: 30px 0 8px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 22px; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

  .about__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
  .about__fact { border: 1px solid rgba(128,128,128,.28); border-radius: 10px;
                 padding: 12px 16px; min-width: 150px; background: rgba(128,128,128,.04); }
  .about__fact b { display: block; font-size: 14px; }
  .about__fact span { color: #6b6b6b; font-size: 13px; }
  .about__quote { border-left: 3px solid rgba(128,128,128,.35); padding: 2px 0 2px 14px;
                  color: #4a4a4a; font-size: 15px; line-height: 1.9; margin: 18px 0; }
  @media (max-width: 560px) {
    .legal h1 { font-size: 24px; }
    .about__fact { min-width: 0; flex: 1 1 100%; }
  }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0    —— 关键。原来是 margin: 0 auto（整体居中），
                           宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，以后栏的边距一变，这里自动跟着变。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal__meta,
    .legal__foot, .about__facts, .about__quote { text-align: left; }

/* ---- 来自 account.html（2026-10 从页面内联搬来）---- */
/* 与全站说明页面同一套文档式排版：黑字、左对齐、紧凑 */
    .legal {
        color: #000;
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; }
    .legal h2 { color: #000; font-size: 16px; margin: 22px 0 4px; }
    .legal h3 { color: #000; font-size: 14.5px; margin: 14px 0 4px; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 14.5px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }

    /* 字段行：名称在左、值在右 */
    .rows { border-top: 1px solid rgba(0, 0, 0, .14); }
    .row { display: flex; align-items: center; gap: 12px; padding: 9px 0;
           border-bottom: 1px solid rgba(0, 0, 0, .10); font-size: 14.5px; }
    .row__k { flex: none; width: 96px; }
    .row__v { flex: 1; min-width: 0; word-break: break-all; }
    .row__act { flex: none; }

    /* 表单：宽屏两列，窄屏自动一列 */
    .form { display: grid; gap: 10px; max-width: 460px; margin: 8px 0 4px; }
    .field { display: block; }
    .label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .input {
        width: 100%; min-height: 36px; padding: 6px 10px;
        font-family: inherit; font-size: 14.5px; color: #000; background: #fff;
        border: 1px solid rgba(0, 0, 0, .20); border-bottom: 1px solid rgba(0, 0, 0, .45);
        border-radius: 4px; box-sizing: border-box;
    }
    .input:focus { outline: none; border-color: var(--brand-60, #0F6CBD);
                   box-shadow: inset 0 -2px 0 var(--brand-60, #0F6CBD); }
    .inline { display: flex; gap: 8px; align-items: flex-end; }
    .inline .field { flex: 1; min-width: 0; }

    .btn {
        appearance: none; min-height: 34px; padding: 0 14px;
        border: 1px solid rgba(0, 0, 0, .16); border-radius: 4px;
        background: #fff; color: #000; font: inherit; font-size: 14px; font-weight: 600;
        cursor: pointer; transition: background .12s ease, border-color .12s ease;
        white-space: nowrap;
    }
    .btn:hover { background: #F3F6FB; border-color: rgba(0, 0, 0, .28); }
    .btn:disabled { opacity: .6; cursor: default; }
    .btn--primary { background: var(--brand-60, #0F6CBD); border-color: transparent; color: #fff; }
    .btn--primary:hover { background: #0B5AA0; }
    .btn--danger { border-color: rgba(180, 35, 42, .45); color: #B4232A; }
    .btn--danger:hover { background: #FDF3F4; }

    .msg { font-size: 13.5px; line-height: 1.6; min-height: 20px; margin: 8px 0 0; color: #000; }
    .msg--err { color: #B4232A; }
    .msg--ok { color: #0F7B0F; }
    .empty { font-size: 14px; padding: 10px 0; }
    .hint { font-size: 12.5px; color: #333; }
    .danger-zone { border: 1px solid rgba(180, 35, 42, .35); border-radius: 6px;
                   padding: 12px 14px; margin-top: 8px; }

/* ---- 来自 changelog.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
  .legal h1 { font-size: 30px; margin: 26px 0 6px; }
  .legal h2 { font-size: 18px; margin: 30px 0 8px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 22px; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
  .legal__foot a { color: inherit; text-decoration: none; }
  .legal__foot a:hover { text-decoration: underline; }
  .legal__ver { display: flex; gap: 12px; align-items: baseline; margin-top: 22px; }
  .legal__tag { font-size: 12px; padding: 2px 8px; border: 1px solid rgba(128,128,128,.4); border-radius: 999px; color: #6b6b6b; }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 cookies.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 40px 24px 72px; }
  .legal h1 { font-size: 32px; line-height: 1.3; margin: 24px 0 8px; }
  .legal h2 { font-size: 20px; line-height: 1.4; margin: 34px 0 10px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; }
  .legal th, .legal td { border: 1px solid rgba(128,128,128,.32); padding: 8px 10px; text-align: left; vertical-align: top; }
  .legal th { font-weight: 600; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 26px; }
  .legal__top { display: flex; align-items: center; gap: 18px; padding: 18px 24px;
                border-bottom: 1px solid rgba(128,128,128,.25); }
  .legal__top a { color: inherit; text-decoration: none; }
  .legal__brand { font-weight: 600; font-size: 17px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
  .legal__foot a { color: inherit; text-decoration: none; }
  .legal__foot a:hover { text-decoration: underline; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 ip.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
  .legal h1 { font-size: 30px; margin: 26px 0 6px; }
  .legal h2 { font-size: 18px; margin: 30px 0 8px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 22px; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
  .legal__foot a { color: inherit; text-decoration: none; }
  .legal__foot a:hover { text-decoration: underline; }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 join.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
  .legal h1 { font-size: 30px; margin: 26px 0 6px; }
  .legal h2 { font-size: 18px; margin: 30px 0 8px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 22px; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

  .join__card { border: 1px solid rgba(128,128,128,.28); border-radius: 10px;
                padding: 16px 18px; margin: 0 0 12px; background: rgba(128,128,128,.04); }
  .join__card h3 { font-size: 15.5px; margin: 0 0 6px; }
  .join__card p { font-size: 14.5px; margin: 0 0 6px; }
  .join__card p:last-child { margin-bottom: 0; }
  .join__meta { color: #6b6b6b; font-size: 13.5px; }
  .join__quote { border-left: 3px solid rgba(128,128,128,.35); padding: 2px 0 2px 14px;
                 color: #4a4a4a; font-size: 15px; line-height: 1.9; margin: 18px 0; }
  @media (max-width: 560px) { .legal h1 { font-size: 24px; } }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 legal.html（2026-10 从页面内联搬来）---- */
/* 法律类页面只做排版：字体、间距、可读性。
     颜色沿用系统字色（深浅色模式下都清楚），不引入新的视觉语言。 */
  .legal { max-width: 860px; margin: 0 auto; padding: 40px 24px 72px; }
  .legal h1 { font-size: 32px; line-height: 1.3; margin: 24px 0 8px; }
  .legal h2 { font-size: 20px; line-height: 1.4; margin: 34px 0 10px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 26px; }
  .legal__top { display: flex; align-items: center; gap: 18px; padding: 18px 24px;
                border-bottom: 1px solid rgba(128,128,128,.25); }
  .legal__top a { color: inherit; text-decoration: none; }
  .legal__brand { font-weight: 600; font-size: 17px; }
  .legal__cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 22px; }
  .legal__card { display: block; padding: 18px 20px; border: 1px solid rgba(128,128,128,.32);
                 border-radius: 10px; text-decoration: none; color: inherit; }
  .legal__card:hover { border-color: rgba(128,128,128,.6); }
  .legal__card b { display: block; font-size: 16px; margin-bottom: 6px; }
  .legal__card span { font-size: 13px; color: #6b6b6b; line-height: 1.7; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
  .legal__foot a { color: inherit; text-decoration: none; }
  .legal__foot a:hover { text-decoration: underline; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 login.html（2026-10 从页面内联搬来）---- */
/* 登录卡片：长方形、单一列，宽度收窄到 380px —— 与软件登录窗的比例接近 */
    .auth {
        width: min(380px, calc(100vw - 32px));
        margin: 12vh auto 0;
        padding: 26px 26px 22px;
        border: 1px solid rgba(0, 0, 0, .10);
        border-radius: 6px;
        background: rgba(252, 253, 255, .94);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        backdrop-filter: saturate(180%) blur(24px);
        box-shadow: 0 24px 64px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .06);
        color: #000;
    }

    .auth__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 6px; }
    .auth__sub { margin: 0 0 20px; font-size: 12.5px; line-height: 1.6; color: #3A3A3A; }

    /* 字段：标签在上、控件在下（与软件里的 Header + 输入框一致） */
    .auth__field { margin-bottom: 14px; }
    .auth__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
    .auth__input {
        width: 100%;
        min-height: 40px;
        padding: 8px 11px;
        font-family: inherit;
        font-size: 15px;
        color: #000;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .16);
        border-bottom: 1px solid rgba(0, 0, 0, .42);   /* Fluent 输入框：底线更重 */
        border-radius: 4px;
        box-sizing: border-box;
        transition: border-color .12s ease, box-shadow .12s ease;
    }
    .auth__input:focus {
        outline: none;
        border-color: var(--brand-60, #0F6CBD);
        box-shadow: inset 0 -2px 0 var(--brand-60, #0F6CBD);
    }
    .auth__input::placeholder { color: #767676; }

    /* 主按钮：整条长条（与账户窗口里的按钮同规格） */
    .auth__submit {
        appearance: none;
        width: 100%;
        min-height: 40px;
        margin-top: 6px;
        border: 1px solid transparent;
        border-radius: 4px;
        background: var(--brand-60, #0F6CBD);
        color: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background .12s ease, transform .12s ease;
    }
    .auth__submit:hover { background: #0B5AA0; }
    .auth__submit:active { transform: scale(.995); }
    .auth__submit:disabled { opacity: .62; cursor: default; }

    .auth__links { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
    .auth__links a, .auth__links button {
        appearance: none; border: 0; background: transparent; padding: 0;
        font: inherit; color: var(--brand-60, #0F6CBD); cursor: pointer; text-decoration: none;
    }
    .auth__links a:hover, .auth__links button:hover { text-decoration: underline; }
    .auth__dot { color: #8A8A8A; }

    /* 状态行：错误红、成功绿（Fluent 的 InfoBar 配色思路） */
    .auth__msg { margin: 14px 0 0; font-size: 13px; line-height: 1.6; min-height: 20px; color: #3A3A3A; }
    .auth__msg--err { color: #B4232A; }
    .auth__msg--ok { color: #0F7B0F; }

    .auth__note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: #555; }

    /* 两个表单互斥显示：靠 body 上的 data-mode 切换，JS 只改一个属性 */
    /* 三个表单互斥：只显示与 <body data-mode> 对应的那一个 */
    .auth--login, .auth--register, .auth--forgot { display: none; }
    body[data-mode="login"] .auth--login,
    body[data-mode="register"] .auth--register,
    body[data-mode="forgot"] .auth--forgot { display: block; }

    /* 返回链接：卡片左上角，不抢视线 */
    .auth__back {
        display: inline-block;
        margin: -2px 0 14px;
        font-size: 13px;
        color: var(--brand-60, #0F6CBD);
        text-decoration: none;
    }
    .auth__back:hover { text-decoration: underline; }

/* ---- 来自 privacy.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 40px 24px 72px; }
  .legal h1 { font-size: 32px; line-height: 1.3; margin: 24px 0 8px; }
  .legal h2 { font-size: 20px; line-height: 1.4; margin: 34px 0 10px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 26px; }
  .legal__top { display: flex; align-items: center; gap: 18px; padding: 18px 24px;
                border-bottom: 1px solid rgba(128,128,128,.25); }
  .legal__top a { color: inherit; text-decoration: none; }
  .legal__brand { font-weight: 600; font-size: 17px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
  .legal__foot a { color: inherit; text-decoration: none; }
  .legal__foot a:hover { text-decoration: underline; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 service-terms.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
  .legal h1 { font-size: 30px; margin: 26px 0 6px; }
  .legal h2 { font-size: 18px; margin: 30px 0 8px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 22px; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
  .legal__foot a { color: inherit; text-decoration: none; }
  .legal__foot a:hover { text-decoration: underline; }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 support.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 32px 24px 72px; }
  .legal h1 { font-size: 30px; margin: 26px 0 6px; }
  .legal h2 { font-size: 18px; margin: 30px 0 8px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 22px; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

  /* ---- 支持中心：一行一个问题，点开才展开说明 ---- */
  .faq { border: 1px solid rgba(128,128,128,.28); border-radius: 10px;
         margin-bottom: 12px; background: rgba(128,128,128,.04); overflow: hidden; }
  .faq > summary { list-style: none; cursor: pointer; user-select: none;
                   padding: 15px 18px; font-size: 15.5px; font-weight: 600;
                   display: flex; align-items: center; gap: 10px; }
  .faq > summary::-webkit-details-marker { display: none; }
  .faq > summary::after {                     /* 右侧小箭头，展开时翻上去 */
      content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
      border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
      transform: rotate(45deg); opacity: .6; transition: transform .18s ease; }
  .faq[open] > summary::after { transform: rotate(-135deg); }
  .faq > summary:hover { background: rgba(128,128,128,.08); }
  .faq[open] > summary { border-bottom: 1px solid rgba(128,128,128,.2); }
  .faq__body { padding: 14px 18px 2px; }
  .faq__body p { font-size: 14.5px; margin: 0 0 10px; }
  .faq__body ul { margin: 0 0 10px; padding-left: 20px; }
  .faq__body li { font-size: 14.5px; line-height: 1.85; margin-bottom: 4px; }
  .faq__note { color: #6b6b6b; font-size: 13.5px; }

  .support__ask { margin-top: 28px; padding-top: 20px;
                  border-top: 1px solid rgba(128,128,128,.25);
                  font-size: 14px; line-height: 1.9; }
  @media (max-width: 560px) {
    .legal h1 { font-size: 24px; }
    .faq > summary { padding: 13px 14px; font-size: 15px; }
    .faq__body { padding: 12px 14px 2px; }
  }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ---- 来自 terms.html（2026-10 从页面内联搬来）---- */
.legal { max-width: 860px; margin: 0 auto; padding: 40px 24px 72px; }
  .legal h1 { font-size: 32px; line-height: 1.3; margin: 24px 0 8px; }
  .legal h2 { font-size: 20px; line-height: 1.4; margin: 34px 0 10px; }
  .legal p, .legal li { line-height: 1.9; font-size: 15px; }
  .legal ul { padding-left: 22px; }
  .legal__meta { color: #6b6b6b; font-size: 13px; margin-bottom: 26px; }
  .legal__top { display: flex; align-items: center; gap: 18px; padding: 18px 24px;
                border-bottom: 1px solid rgba(128,128,128,.25); }
  .legal__top a { color: inherit; text-decoration: none; }
  .legal__brand { font-weight: 600; font-size: 17px; }
  .legal__foot { border-top: 1px solid rgba(128,128,128,.25); padding: 20px 24px;
                 font-size: 13px; color: #6b6b6b; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
  .legal__foot a { color: inherit; text-decoration: none; }
  .legal__foot a:hover { text-decoration: underline; }
  .legal__back { color: inherit; text-decoration: none; font-size: 14px; }

    /* ==================== 文档式排版（2026-10）====================
       像 PDF：黑字、紧凑、没有装饰。放在本页原有规则之后，
       源顺序靠后 + 选择器同级 = 由这些规则说了算。 */
    .legal { color: #000; max-width: 760px; padding: 20px 20px 44px; }
    .legal h1 { color: #000; font-size: 26px; margin: 8px 0 2px; line-height: 1.3; }
    .legal h2 { color: #000; font-size: 16px; margin: 16px 0 4px; line-height: 1.4; }
    .legal p, .legal li { color: #000; line-height: 1.7; font-size: 15px; }
    .legal p { margin: 0 0 8px; }
    .legal ul, .legal ol { margin: 0 0 8px; padding-left: 20px; }
    .legal li { margin-bottom: 2px; }
    .legal__meta { color: #000; font-size: 13px; margin-bottom: 12px; }
    .legal a, .legal__back { color: #000; }
    .legal__foot { color: #000; padding: 12px 20px; }

    /* 各页自带的小装饰一律压平：去边框、去底色、去大留白 */
    .about__facts { gap: 2px 20px; margin: 8px 0 0; }
    .about__fact { border: 0; background: transparent; padding: 0; min-width: 0; flex: 0 1 auto; }
    .about__fact b { display: inline; }
    .about__fact span { color: #000; font-size: 14px; }
    .about__quote, .join__quote { border-left: 2px solid #000; color: #000; margin: 8px 0; padding: 0 0 0 10px; }
    .join__card { border: 0; background: transparent; border-radius: 0; padding: 0; margin: 0 0 8px; }
    .join__card h3 { font-size: 15px; margin: 0 0 2px; }
    .join__card p { margin: 0 0 2px; }
    .join__meta { color: #000; }
    .support__ask { margin-top: 14px; padding-top: 10px; border-top-color: rgba(0, 0, 0, .18); }
    .faq { border-radius: 4px; margin-bottom: 6px; background: transparent; border-color: rgba(0, 0, 0, .22); }
    .faq > summary { padding: 10px 12px; font-size: 15px; }
    .faq__body { padding: 8px 12px 2px; }
    .faq__body p, .faq__body li { font-size: 14.5px; line-height: 1.7; }
    .faq__note { color: #000; }

    /* ==================== 与上方栏严格左对齐（2026-10）====================
       上方那条栏的内容从 --bar-pad-x（=24px）处开始（见 css/fluent.css 的
       .utilbar__inner / .nav__inner），正文也从同一位置开始：
         · margin: 0  —— 关键。原来是 margin: 0 auto（整体居中），
                         宽屏下正文被推到中间，永远对不上左边的商标。
         · 左右内边距都用同一个变量，栏的边距一改，这里自动跟着变。
         · 显式 text-align: left，避免任何继承来的居中。 */
    .legal {
        max-width: 820px;
        margin: 0;
        padding: 20px var(--bar-pad-x, 24px) 44px;
        text-align: left;
    }
    .legal h1, .legal h2, .legal h3,
    .legal p, .legal li, .legal ul, .legal ol,
    .legal__meta, .legal__foot,
    .faq, .faq > summary, .faq__body, .faq__note,
    .support__ask, .join__card, .join__quote { text-align: left; }

/* ============================================================================
   工具类：原本是页面里的内联 style=""，2026-10 安全加固时搬过来。
   ★ 为什么必须搬：CSP 用 style-src 'self'，内联 style 属性会被浏览器忽略。
   ============================================================================ */
.glyph-sprite { position: absolute; }          /* 品牌字形 <svg> 定义块 */
.u-maxw460 { max-width: 460px; }
.u-actswrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.u-mb6 { margin: 0 0 6px; }
.u-mt6 { margin-top: 6px; }
.u-m0 { margin: 0; }
.u-flex8 { display: flex; gap: 8px; }
.u-flex14 { flex: 1.4; }
.u-btnsend { width: auto; min-width: 104px; margin-top: 0; padding: 0 12px; }
.u-btnagain { min-height: 36px; font-size: 14px; margin-top: 10px; }

/* ============================================================================
   多语言切换器（由 public/js/i18n.js 注入，固定左下角）
   ★ 这些样式必须放在**外部样式表**里：站点 CSP 是 style-src 'self'，
     页面内联 <style> / style="" 一律被浏览器拦掉（见 app/__init__.py 的 CSP_POLICY）。
   ============================================================================ */
.hs-i18n {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2147482000;
    font-family: inherit;
    /* ★ 必须显式给深色：本站是深色底白字（body 的文字颜色是白的），
       面板是白底 —— 不写这一行，面板里的选项就会变成白底白字、完全看不见。 */
    color: #1B1B1B;
}
.hs-i18n__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 19px;
    background: #FFFFFF;
    color: #1B1B1B;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
    transition: background .15s ease;
}
.hs-i18n__btn:hover { background: #F3F6FA; }
.hs-i18n__btn:active { transform: translateY(1px); }
.hs-i18n__panel {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .2);
}
.hs-i18n.is-open .hs-i18n__panel { display: block; }
.hs-i18n__panel li { margin: 0; }
.hs-i18n__title {
    padding: 6px 10px 4px;
    font-size: 12px;
    color: #5A5A5A;
}
.hs-i18n__panel button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.hs-i18n__panel button:hover { background: #EFF4FA; }
.hs-i18n__panel button[aria-checked="true"] { background: #E1EDFA; font-weight: 600; }
.hs-i18n__check { flex: none; width: 16px; height: 16px; visibility: hidden; }
.hs-i18n__panel button[aria-checked="true"] .hs-i18n__check { visibility: visible; }

@media (max-width: 560px) {
    .hs-i18n { left: 12px; bottom: 12px; }
    .hs-i18n__panel { min-width: 170px; }
}