*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* ===========================
   全局设计令牌
   =========================== */
:root {
  --ui-scale: 1;

  /* 背景与表面色 */
  --color-bg: #0d0d0d;
  --color-surface: #121212;
  --color-surface-alt: #171717;
  --color-surface-hover: #1d1d1d;
  --color-control: #1e1e20;
  --color-border: #1f1f1f;
  /* 输入框悬停描边：border（#1f1f1f）之上的弱增量，叠 #0d0d0d 底约 #2a2a2a；
     text-dim（20% 白，约 #3d3d3d）过亮刺眼，border 同值则悬停无反馈 */
  --color-border-hover: rgba(255, 255, 255, 0.12);

  /* 主题色 */
  --color-primary: #b4a0fb;
  --color-primary-muted: rgba(180, 160, 251, 0.08);

  /* 文字色 */
  --color-text: #fff;
  --color-text-hover: rgba(255, 255, 255, 0.86);
  --color-text-soft: rgba(255, 255, 255, 0.5);
  --color-text-muted: rgba(255, 255, 255, 0.25);
  --color-text-dim: rgba(255, 255, 255, 0.2);

  /* 语义色 */
  --color-danger: #f77;
  --color-danger-soft: rgba(255, 119, 119, 0.1);
  --color-success: #cff583;
  --color-warning: #ffd47d;
  --color-warning-soft: rgba(255, 212, 125, 0.1);
  --color-info: #77b6ff;

  /* 字体 */
  --font-ui: "Zen SC", "PingFang SC", "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-7: calc(7px * var(--ui-scale));
  --font-8: calc(8px * var(--ui-scale));
  --font-9: calc(9px * var(--ui-scale));
  --font-10: calc(10px * var(--ui-scale));
  --font-11: calc(11px * var(--ui-scale));
  --font-12: calc(12px * var(--ui-scale));
  --font-16: calc(16px * var(--ui-scale));

  /* 圆角 */
  --radius-sm: calc(6px * var(--ui-scale));
  --radius-md: calc(8px * var(--ui-scale));

  /* 布局尺寸 */
  --header-h: calc(56px * var(--ui-scale));
  --auth-card-w: calc(300px * var(--ui-scale));
  --content-w: calc(480px * var(--ui-scale));
  --shell-w: calc(672px * var(--ui-scale));
  --sidebar-w: calc(184px * var(--ui-scale));

  /* 间距令牌 */
  --gap-2: calc(2px * var(--ui-scale));
  --gap-4: calc(4px * var(--ui-scale));
  --gap-6: calc(6px * var(--ui-scale));
  --gap-8: calc(8px * var(--ui-scale));
  --gap-10: calc(10px * var(--ui-scale));
  --gap-12: calc(12px * var(--ui-scale));
  --gap-16: calc(16px * var(--ui-scale));
  --gap-20: calc(20px * var(--ui-scale));
  --gap-24: calc(24px * var(--ui-scale));
  --gap-32: calc(150px * var(--ui-scale));
  --gap-40: calc(40px * var(--ui-scale));
  --gap-48: calc(48px * var(--ui-scale));
  --gap-56: calc(56px * var(--ui-scale));

  /* 滚动条令牌（设计稿 SVG/用户协议和隐私政策.svg 的 id="scrollbar"，--ui-scale:1 基准）：
     轨道 #171717 圆角 2、滑块 #b4a0fb（/legal 页局部覆盖为 50% 透明）、首尾无按钮；
     轨道几何——右缘距视口右 8、顶 56+8=64 起、距底 16 止。
     粗度按用户要求自设计稿 4px 加粗为 5px 且随 --ui-scale 缩放（1.25 档 ≈6.25px，
     原为不缩放的固定 4px 观感偏细）；两条渲染路径（下方 .page-wrapper 的标准属性与
     @supports 分支的 WebKit 伪元素）统一消费，
     /legal 等页面只覆盖变量、不再直接写 scrollbar-color，避免重开两套 API 的优先级竞争 */
  --scrollbar-size: calc(5px * var(--ui-scale));
  --scrollbar-track: #171717;
  --scrollbar-thumb: rgba(180, 160, 251, 0.4);
  --scrollbar-thumb-hover: rgba(180, 160, 251, 0.6);
  --scrollbar-thumb-active: rgba(180, 160, 251, 0.8);
  --scrollbar-radius: 2px;
  --scrollbar-track-start-gap: calc(8px * var(--ui-scale));
  --scrollbar-track-end-gap: calc(16px * var(--ui-scale));
  --scrollbar-inline-inset: calc(8px * var(--ui-scale));
}

/* ===========================
   响应式 UI 缩放
   =========================== */
@media (min-height: 850px) and (min-width: 900px) and (max-height: 1149px) {
  :root { --ui-scale: 1.25; }
}

@media (min-height: 1150px) and (min-width: 1400px) and (max-height: 1699px) {
  :root { --ui-scale: 1.5; }
}

@media (min-height: 1700px) and (min-width: 1800px) and (max-height: 3399px) {
  :root { --ui-scale: 2.5; }
}

@media (min-height: 3400px) and (min-width: 3600px) {
  :root { --ui-scale: 4; }
}

@media (max-width: 700px) {
  :root { --ui-scale: 1; }
}

/* ===========================
   根元素与页面基础
   =========================== */
html {
  height: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  /* 页面滚动容器 .page-wrapper 从头栏下方开始：下沉必须用 body padding 而非 margin
     （margin 会塌陷穿透 body，与 min-height:100vh 叠加把文档撑出 56px·s，html 会多出一条整页滚动条） */
  padding-top: var(--header-h);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--font-11);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

/* ===========================
   顶部导航
   =========================== */
.app-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: var(--color-surface);
  /* 描边走 inset 阴影而非 border：不占盒模型，fixed + border-box 定高不变，布局零位移；阴影自动跟随底部圆角（与认证卡片同机制） */
  border: 0;
  box-shadow: inset 0 0 0 calc(1px * var(--ui-scale)) var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.app-header__inner {
  width: min(100%, var(--shell-w));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gap-16);
}

.app-header__brand {
  width: calc(64px * var(--ui-scale));
  height: calc(32px * var(--ui-scale));
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-header__logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.app-header__brand-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===========================
   页面容器
   =========================== */
/* 全站滚动容器：html 不滚动，页面滚动由 .page-wrapper 承担并从头栏下方开始，
   滚动条自然位于 .app-header 之下，头栏全宽铺满（下沉手段见 body 的 padding-top 注释）；
   padding-top:144·s + 头栏 56·s = 设计稿卡片顶距视口顶 200px（responsive.css 的 700px 段对移动端另有覆盖）；
   padding-bottom 为底部冗余，避免内容贴网页底边 */
.page-wrapper {
  height: calc(100vh - var(--header-h));
  display: flex;
  justify-content: center;
  /* 设计稿滚动条距视口右 8px·s：原生滚动条只能贴滚动容器右缘，故右缩容器本身；
     等量 padding-left 对称补偿——内容中心线仍与视口中心线重合（有无滚动条两种状态
     均与全宽几何逐像素一致），登录卡/法律卡/仪表盘 shell 不漂移，也不产生水平滚动 */
  margin-right: var(--scrollbar-inline-inset);
  padding-left: var(--scrollbar-inline-inset);
  padding-top: calc(144px * var(--ui-scale));
  padding-bottom: calc(40px * var(--ui-scale));
  overflow-y: auto;
  /* 滚动条槽位两侧恒定对称预留（both-edges）：有无滚动条两种状态的内容几何
     完全一致——此前仅可滚动页被滚动条占用 sb 内容宽、居中内容左移 sb/2，
     长/短页切换产生横向跳动（用户反馈的 X 坐标漂移）。对称槽位下内容
     中心线恒等于视口中心线，与 scrollbar-inline-inset 的"距视口右 8"定位
     补偿正交叠加；配合 profile-shell 居中边距回归几何值（见该处注释） */
  scrollbar-gutter: stable both-edges;
  /* 标准滚动条属性路径（Firefox 等仅支持标准 API 的浏览器）：thin + 品牌色。
     标准 CSS Scrollbars Level 1 只能控制粗细与双色，无法去除首尾按钮，Firefox 优雅降级；
     Chromium/Safari 由下方 @supports 能力分支恢复 auto 并改走 WebKit 伪元素精确绘制 */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* 强制颜色模式（Windows 高对比等）：恢复原生滚动条配色，交给系统保证 thumb/track 可区分；
   仅作用于该媒体分支，正常模式不受影响 */
@media (forced-colors: active) {
  .page-wrapper {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}

/* ===========================
   WebKit 滚动条能力分支（Chromium/Safari）
   =========================== */
/* 探针刻意用 ::-webkit-scrollbar-button 而非 ::-webkit-scrollbar：Firefox 129+ 也把后者
   （及 thumb/track）实现为标准 scrollbar-* 属性的别名，用它做探针会把 Firefox 误入本分支；
   Firefox 不支持 -button 伪元素，本分支只匹配 Chromium/Safari。
   分支内必须先恢复 scrollbar-width/color 为 auto：Chromium 121+ 支持标准滚动条属性，
   非 auto 值会接管渲染并使 ::-webkit-scrollbar-* 伪元素完全不参与绘制
   （这正是此前按钮隐藏规则失效、上下箭头回归的根因），恢复 auto 后伪元素样式才生效 */
@supports selector(::-webkit-scrollbar-button) {
  .page-wrapper {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  /* 品牌滚动条作用域 = 页面主滚动容器 + 现有依赖品牌皮肤的元素级滚动区
     （模态框/审计详情/确认对话框长文/头像裁剪/表格横向滚动/textarea）。
     不再使用裸全局伪元素选择器，未来新组件不会被隐式污染；combobox 下拉不在此列——
     combobox.css 以 scrollbar-width: none + 伪元素 display:none 双机制自行隐藏滚动条；
     生成结果码区亦不在此列——generate.css 按 生成2.svg Scrollbar Indicator 有独立白滑块设计 */
  .page-wrapper::-webkit-scrollbar,
  .modal__body::-webkit-scrollbar,
  .audits-detail__body::-webkit-scrollbar,
  .audits-detail__json::-webkit-scrollbar,
  .confirm-dialog__container--content .confirm-dialog__body::-webkit-scrollbar,
  .avatar-cropper-modal__body::-webkit-scrollbar,
  .table-wrapper::-webkit-scrollbar,
  textarea::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  .page-wrapper::-webkit-scrollbar-track,
  .modal__body::-webkit-scrollbar-track,
  .audits-detail__body::-webkit-scrollbar-track,
  .audits-detail__json::-webkit-scrollbar-track,
  .confirm-dialog__container--content .confirm-dialog__body::-webkit-scrollbar-track,
  .avatar-cropper-modal__body::-webkit-scrollbar-track,
  .table-wrapper::-webkit-scrollbar-track,
  textarea::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--scrollbar-radius);
  }

  /* 主滚动容器轨道的上下留白（设计稿 y=64..704，1280×720/1x 基准）：轨道从容器顶
     头栏 56+8·s 处开始、距容器底 16·s 处结束；margin 只缩减轨道可用范围，thumb 滚到
     顶/底仍贴轨道两端，其高度与位置始终由浏览器按内容与滚动位置动态计算
     （设计稿 180px/y=80 只是截稿状态，不写死）；组件级滚动区不加大面积留白，维持原观感 */
  .page-wrapper::-webkit-scrollbar-track {
    margin-top: var(--scrollbar-track-start-gap);
    margin-bottom: var(--scrollbar-track-end-gap);
  }

  .page-wrapper::-webkit-scrollbar-thumb,
  .modal__body::-webkit-scrollbar-thumb,
  .audits-detail__body::-webkit-scrollbar-thumb,
  .audits-detail__json::-webkit-scrollbar-thumb,
  .confirm-dialog__container--content .confirm-dialog__body::-webkit-scrollbar-thumb,
  .avatar-cropper-modal__body::-webkit-scrollbar-thumb,
  .table-wrapper::-webkit-scrollbar-thumb,
  textarea::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
  }

  .page-wrapper::-webkit-scrollbar-thumb:hover,
  .modal__body::-webkit-scrollbar-thumb:hover,
  .audits-detail__body::-webkit-scrollbar-thumb:hover,
  .audits-detail__json::-webkit-scrollbar-thumb:hover,
  .confirm-dialog__container--content .confirm-dialog__body::-webkit-scrollbar-thumb:hover,
  .avatar-cropper-modal__body::-webkit-scrollbar-thumb:hover,
  .table-wrapper::-webkit-scrollbar-thumb:hover,
  textarea::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }

  .page-wrapper::-webkit-scrollbar-thumb:active,
  .modal__body::-webkit-scrollbar-thumb:active,
  .audits-detail__body::-webkit-scrollbar-thumb:active,
  .audits-detail__json::-webkit-scrollbar-thumb:active,
  .confirm-dialog__container--content .confirm-dialog__body::-webkit-scrollbar-thumb:active,
  .avatar-cropper-modal__body::-webkit-scrollbar-thumb:active,
  .table-wrapper::-webkit-scrollbar-thumb:active,
  textarea::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
  }

  /* 设计稿滚动条首尾无上下按钮：display:none 表达语义；height:0 防垂直按钮继续占据
     纵向空间、width:0 防水平按钮占据横向空间——只设透明背景的按钮仍会占位并响应点击 */
  .page-wrapper::-webkit-scrollbar-button,
  .modal__body::-webkit-scrollbar-button,
  .audits-detail__body::-webkit-scrollbar-button,
  .audits-detail__json::-webkit-scrollbar-button,
  .confirm-dialog__container--content .confirm-dialog__body::-webkit-scrollbar-button,
  .avatar-cropper-modal__body::-webkit-scrollbar-button,
  .table-wrapper::-webkit-scrollbar-button,
  textarea::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

.page-wrapper--dashboard {
  align-items: flex-start;
}

/* ===========================
   文字工具类
   =========================== */
.text-9 { font-size: var(--font-9); }
.text-11 { font-size: var(--font-11); }
.text-12 { font-size: var(--font-12); }
.text-faded { color: var(--color-text-soft); }
.text-muted { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }
.text-strong { font-weight: 700; }