/* =========================================================================
   QRVeo Console — 设计系统 v3（浅绿 / 白）覆盖层
   -------------------------------------------------------------------------
   来源：test.md（QRVeo Console 设计系统 v3，2026-10-27）
   适用面：/secure/* 全部页面外壳（悬浮侧栏 + 顶栏）+ #/secure/overview 工作台
   落地：/__vqr/overview.css（admin-skin 只读挂载，no-cache，改后即时生效）
   门控：全部规则以 html.vqr-theme-site 为前缀（console.js 在工作台恒加该类；
        2026-10-27 起经典 Clásico 模式下线，界面只有 VideoQR 一套皮肤）。
   加载顺序：skin.css → console.css(v1.1) → fix.css → overview.css(本层，最后)。
   实现策略：
     1) 把 console.css 消费的 --site-* 变量整体重映射到 v3 色板，
        v1.1 已铺开的表格/输入/弹窗/分页/图表规则自动跟随 v3；
     2) 结构性变更（悬浮侧栏、胶囊工具条、按钮 pill、KPI 重构、
        两段式卡片头、通栏动作行、纵向堆叠）在本层显式覆盖。
   硬约束：主色调＝浅绿 + 白；绿色只出现在「可操作」「已选中」「品牌」。
   ========================================================================= */

/* ---------- 字体：Fira Sans（正文）/ Fira Code（等宽数字），自托管 ---------- */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/__vqr/fonts/firasans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/__vqr/fonts/firasans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020-2026,U+2030-205F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/__vqr/fonts/firasans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/__vqr/fonts/firasans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020-2026,U+2030-205F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/__vqr/fonts/firasans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/__vqr/fonts/firasans-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020-2026,U+2030-205F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/__vqr/fonts/firasans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/__vqr/fonts/firasans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020-2026,U+2030-205F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;
  src:url('/__vqr/fonts/firacode-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;
  src:url('/__vqr/fonts/firacode-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020-2026,U+2030-205F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 令牌（§2/§3/§4/§10） ---------- */
html.vqr-theme-site{
  /* 中性 / 表面 */
  --ov-bg:#F5FAF6;
  --ov-surface:#FFFFFF;
  --ov-surface-2:#EFF7F1;
  --ov-surface-3:#E4F1E8;
  --ov-border:#DCEBE1;
  --ov-border-strong:#BED8C8;
  /* 文字 */
  --ov-ink:#0E1F18;
  --ov-ink-2:#44584F;
  --ov-ink-3:#5C7368;
  /* 品牌绿 / 状态 */
  --ov-mint:#C4F5E4;
  --ov-accent:#146B4B;
  --ov-accent-hover:#105741;
  --ov-accent-soft:#DCF3E6;
  --ov-accent-text:#0F6B4A;
  --ov-success:#15803D;
  --ov-danger:#B42318;
  --ov-danger-soft:#FDECEA;
  --ov-warning:#8A5A00;
  --ov-warning-soft:#FEF3D6;
  --ov-ring:#0F6B4A;
  /* 图表序列（§2.4） */
  --ov-series-1:#146B4B;
  --ov-series-2:#2A9D8F;
  --ov-series-3:#7CB342;
  --ov-series-4:#C77D2E;
  /* 字体 */
  --ov-font-sans:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --ov-font-mono:"Fira Code",ui-monospace,SFMono-Regular,Consolas,monospace;
  /* 圆角 / 阴影 */
  --ov-r-sm:8px;
  --ov-r-md:10px;
  --ov-r-lg:14px;
  --ov-r-xl:18px;
  --ov-r-pill:999px;
  --ov-shadow-1:0 1px 2px rgba(14,31,24,.04),0 1px 3px rgba(14,31,24,.06);
  --ov-shadow-2:0 4px 12px rgba(14,31,24,.06),0 1px 3px rgba(14,31,24,.05);
  --ov-shadow-pop:0 16px 40px rgba(14,31,24,.14),0 2px 8px rgba(14,31,24,.08);
  /* 动效 */
  --ov-dur-fast:150ms;
  --ov-dur-base:220ms;
  --ov-ease:cubic-bezier(.22,1,.36,1);

  /* v1.1(--site-*) → v3 重映射：console.css 的全部消费方自动跟随 */
  --site-bg:var(--ov-bg);
  --site-band:var(--ov-surface-2);
  --site-surface:var(--ov-surface);
  --site-frame:var(--ov-surface-3);
  --site-seam:var(--ov-border);
  --site-seam-strong:var(--ov-border-strong);
  --site-ink:var(--ov-ink);
  --site-ink-2:var(--ov-ink-2);
  --site-muted:var(--ov-ink-3);
  --site-green:var(--ov-accent);
  --site-green-deep:var(--ov-accent-hover);
  --site-green-hover:var(--ov-accent-hover);
  --site-green-50:var(--ov-accent-soft);
  --site-green-accent:var(--ov-accent-text);
  --site-ok:var(--ov-success);
  --site-ok-soft:#E8F7EF;
  --site-warn:var(--ov-warning);
  --site-warn-soft:var(--ov-warning-soft);
  --site-danger:var(--ov-danger);
  --site-danger-soft:var(--ov-danger-soft);
  /* 圆角体系收敛到 v3：按钮 10 / 卡片 14 / 弹窗单独 18（见下） */
  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;
}

/* ---------- 画布与字体（§2.1/§3） ---------- */
html.vqr-theme-site body{
  background:var(--ov-bg) !important;
}
html.vqr-theme-site .app-container,
html.vqr-theme-site .app-main{
  font-family:var(--ov-font-sans);
}
html.vqr-theme-site .app-main{
  background:var(--ov-bg) !important;
  color:var(--ov-ink);
  font-variant-numeric:tabular-nums;
}
/* 厂商 .main-container 带 min-width:1280px：1440 窗口下主区被硬撑出 80px
   横向溢出（§8 硬性要求 scrollWidth ≤ clientWidth），必须松开 */
html.vqr-theme-site .app-container .main-container{
  min-width:0 !important;
}

/* =========================================================================
   核心变更 A：悬浮绿意侧栏（§5）
   面板用 .app-nav-bar::before 绝对定位绘制，不参与 flex 布局（不挤动主区）。
   内容区通过 .app-nav-bar 自身的 12px 8px 12px 12px 内边距落进面板。
   ========================================================================= */
html.vqr-theme-site .sidebar-container{
  background:transparent;
  --main-sidebar-collapsed-width:64px !important; /* 收起 rail 48 → 64（§5/§8） */
}
html.vqr-theme-site .app-nav-bar{
  position:relative;
  box-sizing:border-box;
  padding:12px 8px 12px 12px;
  background:transparent !important;
  border-right:none !important;
}
html.vqr-theme-site .app-nav-bar::before{
  content:"";
  position:absolute;
  top:12px;right:8px;bottom:12px;left:12px;
  background:var(--ov-surface);
  border:1px solid var(--ov-border);
  border-radius:var(--ov-r-xl);
  box-shadow:var(--ov-shadow-1);
  pointer-events:none;
}
/* 内容抬到面板之上（伪元素是首个孩子，定位后的兄弟天然压过它） */
html.vqr-theme-site .app-nav-bar .logo-container,
html.vqr-theme-site .app-nav-bar .sidebar.pwc-menu{
  position:relative;
}
/* 品牌行：56px 高 + 底部发丝分割 */
html.vqr-theme-site .app-nav-bar .logo-container{
  height:56px;
  background:transparent !important;
  border-bottom:1px solid var(--ov-border);
}
html.vqr-theme-site .sidebar-logo-container{
  --sidebar-bg:transparent !important;
  background:transparent !important;
  border-bottom:none !important;
  min-height:56px;
}
/* 白底面板 → 深色字标（console.css 的白字标是深绿侧栏时代的产物） */
html.vqr-theme-site .sidebar-brand-wordmark{
  background-image:url('/__vqr/logo-word.png') !important;
}
html.vqr-theme-site .sidebar-brand-link:hover{
  background:var(--ov-surface-2) !important;
}
html.vqr-theme-site .sidebar-logo,
html.vqr-theme-site .sidebar-logo-hit{
  color:var(--ov-ink-3) !important;
}
html.vqr-theme-site .sidebar-logo-hit:hover{
  background:var(--ov-surface-2) !important;
}
/* 菜单容器：厂商写死 width:240px 会溢出悬浮面板 → 100%（§13-3）；
   背景是行内 style rgb(21,33,62)，必须 !important。
   2026-10-28 修复（问题 B）：原选择器把 `.pwc-skin-color-mode--dark` 单列成一条，
   这条规则同时命中了收起态下悬停弹出的 `.pwc-sub-menu__popper.is-dark
   .pwc-skin-color-mode--dark` —— 弹层被强行 `width:100%`（实测 1440px 宽）
   且 `background:transparent`，于是浮层变成一条全透明的横条，白字贴在页面上，
   「选项栏无法正常显示」。这里收窄为必须同时带 .pwc-menu，弹层单独在下面赋样式。 */
html.vqr-theme-site .app-nav-bar .sidebar.pwc-menu,
html.vqr-theme-site .pwc-menu,
html.vqr-theme-site .pwc-menu.sidebar.is-dark,
html.vqr-theme-site .pwc-menu.pwc-skin-color-mode--dark{
  width:100% !important;
  background:transparent !important;
  color:var(--ov-ink-2) !important;
}
html.vqr-theme-site .pwc-menu__content{
  padding:8px 4px;
}
/* 菜单项：40px 行高、r-md、居中、左内边距 10 */
html.vqr-theme-site .app-nav-bar .pwc-menu-item__content,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content{
  min-height:40px;
  padding-top:0 !important;
  padding-bottom:0 !important;
  padding-left:10px;
  align-items:center !important;
  column-gap:10px;
  border-radius:var(--ov-r-md) !important;
  color:var(--ov-ink-2) !important;
  opacity:1 !important; /* §13-4：分组内容 opacity:.4 重置 */
  transition:background-color var(--ov-dur-fast) var(--ov-ease),color var(--ov-dur-fast) var(--ov-ease);
}
html.vqr-theme-site .pwc-menu-item,
html.vqr-theme-site .pwc-sub-menu{
  margin:1px 0;
}
html.vqr-theme-site .pwc-menu-item__title,
html.vqr-theme-site .pwc-sub-menu__title{
  color:inherit !important;
  font-size:14px;
  font-weight:500;
}
/* 图标：24×24 圆角块 + surface-2 底 */
html.vqr-theme-site .app-nav-bar .pwc-menu-item__icon,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu__icon{
  flex:none;
  width:24px;
  height:24px;
  margin-top:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:var(--ov-surface-2);
  color:var(--ov-ink-2) !important;
  font-size:15px;
  transition:background-color var(--ov-dur-fast) var(--ov-ease),color var(--ov-dur-fast) var(--ov-ease);
}
/* hover：surface-2 底 + 主文字 */
html.vqr-theme-site .app-nav-bar .pwc-menu-item__content:hover,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content:hover{
  background:var(--ov-surface-2) !important;
  color:var(--ov-ink) !important;
}
html.vqr-theme-site .app-nav-bar .pwc-menu-item__content:hover .pwc-menu-item__icon,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content:hover .pwc-sub-menu__icon{
  color:var(--ov-ink) !important;
  background:var(--ov-surface-3);
}
/* 激活项：浅绿底 + 深绿字 + 实心绿图标块（不再用左侧竖条） */
html.vqr-theme-site .app-nav-bar .pwc-menu-item__content.is-active,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content.is-active{
  background:var(--ov-accent-soft) !important;
  color:#0B4A34 !important;
}
html.vqr-theme-site .app-nav-bar .pwc-menu-item__content.is-active .pwc-menu-item__title,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content.is-active .pwc-sub-menu__title{
  color:#0B4A34 !important;
  font-weight:600;
}
html.vqr-theme-site .app-nav-bar .pwc-menu-item__content.is-active .pwc-menu-item__icon,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content.is-active .pwc-sub-menu__icon{
  background:var(--ov-accent) !important;
  color:#FFFFFF !important;
}
/* 分组子项：14px 缩进 + 1px 竖向树线（只覆盖子项块） */
html.vqr-theme-site .pwc-sub-menu__children__list{
  margin-left:21px;
  padding-left:13px;
  border-left:1px solid var(--ov-border-strong);
}
html.vqr-theme-site .pwc-sub-menu__children .pwc-menu-item__content{
  min-height:36px;
}
html.vqr-theme-site .pwc-sub-menu__children .pwc-menu-item__title{
  color:var(--ov-ink-2) !important;
  font-size:13px;
}
html.vqr-theme-site .pwc-sub-menu__children .pwc-menu-item__content:hover .pwc-menu-item__title{
  color:var(--ov-ink) !important;
}
html.vqr-theme-site .pwc-sub-menu__children .pwc-menu-item__content.is-active .pwc-menu-item__title{
  color:#0B4A34 !important;
}
/* Beta / New 徽标是 ::after 伪元素（§13-5）：白底上改成可读的危险/品牌色对 */
html.vqr-theme-site .app-nav-bar .pwc-menu-item.menu-item-beta>.pwc-menu-item__content:after,
html.vqr-theme-site .app-nav-bar .pwc-sub-menu.menu-item-beta>.pwc-sub-menu__wrap>.pwc-sub-menu__content:after{
  background:var(--ov-mint) !important;
  color:var(--ov-accent-text) !important;
  border-radius:var(--ov-r-pill) !important;
  padding:3px 8px;
  font-weight:600 !important;
}
html.vqr-theme-site .app-nav-bar .menu-item-new .pwc-menu-item__content:after{
  background:var(--ov-danger-soft);
  color:var(--ov-danger) !important;
  border-radius:var(--ov-r-pill);
  padding:2px 6px;
  font-weight:600;
}
/* 侧栏滚动条：白底面板里换成绿灰 */
html.vqr-theme-site .app-nav-bar .pwc-menu__body:hover::-webkit-scrollbar-thumb{
  background:var(--ov-border-strong);
}
html.vqr-theme-site .app-nav-bar .pwc-menu__body:hover{
  scrollbar-color:var(--ov-border-strong) transparent;
}
/* 侧栏内焦点环：贴边不溢出（§5/§9-2） */
html.vqr-theme-site .app-nav-bar :focus-visible{
  outline:2px solid var(--ov-ring) !important;
  outline-offset:-2px !important;
}
/* 收起态（rail）：面板仍悬浮，仅图标居中，激活态为实心绿方块。
   2026-10-28 修复（问题 A：图标移位出格）：
   厂商给激活项/部分项加了 `padding-right:12px`（只有左内边距被我们在上面清零），
   而这里又是 justify-content:center —— 右侧 12px 内边距会把居中点整体左推 6px，
   于是 rail 里激活项图标比其它项左偏半个字距（实测 delta -6px）。
   收起态必须左右内边距同时归零、并去掉图标与标题之间的列间距。 */
html.vqr-theme-site .sidebar-container--collapsed .app-nav-bar .pwc-menu-item__content,
html.vqr-theme-site .sidebar-container--collapsed .app-nav-bar .pwc-sub-menu__content{
  justify-content:center;
  padding-left:0 !important;
  padding-right:0 !important;
  column-gap:0 !important;
}
html.vqr-theme-site .sidebar-container--collapsed .app-nav-bar .pwc-menu-item__content.is-active,
html.vqr-theme-site .sidebar-container--collapsed .app-nav-bar .pwc-sub-menu__content.is-active{
  background:transparent !important;
}
/* 收起态整条 rail 的绝对居中：厂商在 .app-nav-bar 上写的是 `padding:12px 8px`，
   左右不对称，内容区（44px）落在 12–56 而栏宽 64 → 整列图标统一右偏 2px。
   左右各 10px 保持内容宽度 44px 不变，只把中心挪回 32（实测 dx 由 +2 → 0）。 */
html.vqr-theme-site .sidebar-container--collapsed .app-nav-bar{
  padding-left:10px !important;
  padding-right:10px !important;
}
html.vqr-theme-site .sidebar-container--collapsed .sidebar-brand-wordmark{
  display:none;
}
html.vqr-theme-site .sidebar-container--collapsed .sidebar-brand-link{
  justify-content:center;
}
/* 收起态悬停浮层（问题 B）：厂商按「深色侧栏」写死了 popper 的 is-dark 皮肤 ——
   白字 + 透明底 + 宽度被撑满。白底悬浮面板下这套皮肤完全不可读，
   这里统一改成与面板同款的浅色卡片（保留 .is-active/.hover 的绿意）。 */
html.vqr-theme-site .pwc-sub-menu__popper{
  width:max-content !important;
  min-width:176px;
  max-width:300px;
  padding:6px !important;
  background:var(--ov-surface) !important;
  border:1px solid var(--ov-border) !important;
  border-radius:var(--ov-r-lg) !important;
  box-shadow:var(--ov-shadow-pop) !important;
  color:var(--ov-ink-2) !important;
}
/* 箭头：贴边的小方块，白底 + 单边框即可，别继承深色皮肤 */
html.vqr-theme-site .pwc-sub-menu__popper .pwc-popper-arrow{
  background:var(--ov-surface) !important;
  border:1px solid var(--ov-border) !important;
}
html.vqr-theme-site .pwc-sub-menu__popper .pwc-menu-item__content,
html.vqr-theme-site .pwc-sub-menu__popper .pwc-sub-menu__content{
  min-height:34px;
  padding:0 10px !important;
  justify-content:flex-start !important;
  column-gap:0 !important;
  background:transparent !important;
  color:var(--ov-ink-2) !important;
  border-radius:var(--ov-r-sm) !important;
}
/* 厂商在收起态把标题 display:none，浮层里必须恢复 */
html.vqr-theme-site .pwc-sub-menu__popper .pwc-menu-item__title,
html.vqr-theme-site .pwc-sub-menu__popper .pwc-sub-menu__title{
  display:block !important;
  color:inherit !important;
  opacity:1 !important;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
}
html.vqr-theme-site .pwc-sub-menu__popper .pwc-menu-item__content:hover,
html.vqr-theme-site .pwc-sub-menu__popper .pwc-sub-menu__content:hover{
  background:var(--ov-surface-2) !important;
  color:var(--ov-ink) !important;
}
html.vqr-theme-site .pwc-sub-menu__popper .pwc-menu-item__content.is-active,
html.vqr-theme-site .pwc-sub-menu__popper .pwc-sub-menu__content.is-active{
  background:var(--ov-accent-soft) !important;
  color:#0B4A34 !important;
}
html.vqr-theme-site .pwc-sub-menu__popper .pwc-menu-item__content.is-active .pwc-menu-item__title,
html.vqr-theme-site .pwc-sub-menu__popper .pwc-sub-menu__content.is-active .pwc-sub-menu__title{
  color:#0B4A34 !important;
  font-weight:600;
}
/* 浮层里不需要图标与 Beta/New 角标（宽度本就紧张，且图标已在 rail 上） */
html.vqr-theme-site .pwc-sub-menu__popper .pwc-menu-item__icon,
html.vqr-theme-site .pwc-sub-menu__popper .pwc-sub-menu__icon,
html.vqr-theme-site .pwc-sub-menu__popper .pwc-sub-menu__right{
  display:none !important;
}

/* =========================================================================
   顶栏：单一胶囊工具条 + 薄荷邮箱 chip（§6.2-1）
   DOM：.tools > [a.header-link, .dropdown-box × 2, .dropdown-box(邮箱，末位)]
   末位邮箱独立成 chip，与胶囊留 12px；胶囊项间 1px 发丝分隔。
   ========================================================================= */
html.vqr-theme-site .top-nav-bar{
  background:var(--ov-bg) !important;
  border-bottom:none !important;
  box-shadow:none !important;
  padding-right:20px;
}
html.vqr-theme-site .top-nav-bar .tools{
  gap:0 !important;
  line-height:normal !important;
}
html.vqr-theme-site .top-nav-bar .tools > *{
  display:inline-flex;
  align-items:center;
  height:36px;
  margin:0 !important;
  padding:0 14px;
  background:var(--ov-surface);
  border-top:1px solid var(--ov-border);
  border-bottom:1px solid var(--ov-border);
  border-left:1px solid var(--ov-border);
  border-right:none; /* 分段间只保留一条发丝，右端由 nth-last-child(2) 补 */
  color:var(--ov-ink-2);
  font-size:14px;
  transition:background-color var(--ov-dur-fast) var(--ov-ease);
}
/* 直挂的 a.header-link（首个分段）带 .plv-button 的 pill !important 与
   console.css 的按钮底色，需要显式归位到分段形态 */
html.vqr-theme-site .top-nav-bar .tools > a.header-link{
  border-radius:0 !important;
  background:var(--ov-surface) !important;
}
html.vqr-theme-site .top-nav-bar .tools > a.header-link:hover{
  background:var(--ov-surface-2) !important;
  color:var(--ov-ink) !important;
}
html.vqr-theme-site .top-nav-bar .tools > *:first-child,
html.vqr-theme-site .top-nav-bar .tools > a.header-link:first-child{
  border-radius:var(--ov-r-pill) 0 0 var(--ov-r-pill) !important;
}
/* 胶囊右端 = 倒数第二项（末位是邮箱 chip） */
html.vqr-theme-site .top-nav-bar .tools > *:nth-last-child(2){
  border-right:1px solid var(--ov-border);
  border-radius:0 var(--ov-r-pill) var(--ov-r-pill) 0;
}
html.vqr-theme-site .top-nav-bar .tools > *:hover{
  background:var(--ov-surface-2);
  color:var(--ov-ink);
}
/* 胶囊内部的厂商按钮/下拉触发器：去掉自身 chrome，服从分段容器。
   注意只作用于 dropdown 内部的链接 —— 直挂 .tools 的 a.header-link 本身就是
   胶囊的第一个分段（背景/圆角由分段规则负责），不能被这条重置抹掉。 */
html.vqr-theme-site .top-nav-bar .tools .text-box,
html.vqr-theme-site .top-nav-bar .tools .text-box .header-link{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:inherit !important;
  padding:0 !important;
  height:auto !important;
  min-height:0 !important;
  font-size:inherit;
  display:inline-flex;
  align-items:center;
}
html.vqr-theme-site .top-nav-bar .tools .dropdown-box .text-box{
  height:100%;
}
/* 末位：邮箱薄荷 chip */
html.vqr-theme-site .top-nav-bar .tools > *:last-child{
  margin-left:12px !important;
  background:var(--ov-mint);
  border:1px solid var(--ov-mint);
  border-radius:var(--ov-r-pill);
  color:#0B4A34;
}
html.vqr-theme-site .top-nav-bar .tools > *:last-child:hover{
  background:var(--ov-accent-soft);
  border-color:var(--ov-accent-soft);
  color:#0B4A34;
}
html.vqr-theme-site .top-nav-bar .tools .user-email,
html.vqr-theme-site .top-nav-bar .tools .dropdown-box .text-box .user-email{
  color:#0B4A34 !important;
  font-weight:500;
}
html.vqr-theme-site .top-nav-bar .tools .dropdown-box .text-box .plv-admin-icon-arrow-down:before{
  color:#0B4A34;
}

/* =========================================================================
   核心变更 B：按钮体系（§6.1）—— pill、active 下沉、六态齐全
   ========================================================================= */
html.vqr-theme-site .plv-button{
  border-radius:var(--ov-r-pill) !important;
  font-weight:500;
  transition:background-color var(--ov-dur-fast) var(--ov-ease),border-color var(--ov-dur-fast) var(--ov-ease),color var(--ov-dur-fast) var(--ov-ease),transform var(--ov-dur-fast) var(--ov-ease);
}
html.vqr-theme-site .plv-button:active{
  transform:translateY(1px); /* 下沉 1px，替代 v1.1 的 scale(.98) */
}
html.vqr-theme-site .plv-button.is-disabled,
html.vqr-theme-site .plv-button[disabled]{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none !important;
}
/* 聚合页编辑器（6710 分包）的 PwcButton 同为 pill（§6.1：同一层同半径）；
   颜色仍由 P11 v2 的 --pwc-button-* 变量供给，本层只统一形状 */
html.vqr-theme-site .pwc-button{
  border-radius:var(--ov-r-pill) !important;
}
/* 侧卡动作按钮（§6.2-4：纵向堆叠、整宽、主操作在上） */html.vqr-theme-site .overview-account-actions{
  grid-template-columns:1fr !important;
  gap:8px !important;
}
html.vqr-theme-site .overview-account-actions__btn{
  width:100%;
  height:36px;
  border-radius:var(--ov-r-pill) !important;
  background:var(--ov-surface) !important;
  border:1px solid var(--ov-border) !important;
  color:var(--ov-ink-2) !important;
  transition:background-color var(--ov-dur-fast) var(--ov-ease),border-color var(--ov-dur-fast) var(--ov-ease);
}
html.vqr-theme-site .overview-account-actions__btn:hover{
  background:var(--ov-surface-2) !important;
  border-color:var(--ov-border-strong) !important;
  color:var(--ov-ink) !important;
}
html.vqr-theme-site .overview-account-actions__btn--primary{
  background:var(--ov-accent) !important;
  border-color:var(--ov-accent) !important;
  color:#FFFFFF !important;
}
html.vqr-theme-site .overview-account-actions__btn--primary:hover{
  background:var(--ov-accent-hover) !important;
  border-color:var(--ov-accent-hover) !important;
  color:#FFFFFF !important;
}

/* =========================================================================
   卡片 / 面板（§7.1/§7.2）：白底 + 1px 边框 + r-lg 14 + 极轻阴影
   ========================================================================= */
html.vqr-theme-site .overview-kpi-card,
html.vqr-theme-site .overview-video-trends-section,
html.vqr-theme-site .overview-rich-panel,
html.vqr-theme-site .overview-ranking-tables-section,
html.vqr-theme-site .overview-account-panel,
html.vqr-theme-site .overview-watch__panel,
html.vqr-theme-site .secure-page-panel{
  background:var(--ov-surface) !important;
  border:1px solid var(--ov-border) !important;
  border-radius:var(--ov-r-lg) !important;
  box-shadow:var(--ov-shadow-1) !important;
}
html.vqr-theme-site .overview-watch__panel,
html.vqr-theme-site .overview-rich-panel,
html.vqr-theme-site .overview-account-panel,
html.vqr-theme-site .overview-video-trends-section,
html.vqr-theme-site .overview-ranking-tables-section{
  padding:20px;
}

/* ---------- KPI 卡（§7.1）：96 高、图标右上 40×40 薄荷块、统一绿阶 ---------- */
html.vqr-theme-site .overview-kpi-card{
  display:block !important;
  position:relative;
  box-sizing:border-box;
  min-height:96px !important; /* 目标 96；西语长标题折行时允许自然撑高 */
  padding:14px 64px 14px 18px !important;
  overflow:hidden;
  transition:transform var(--ov-dur-fast) var(--ov-ease),border-color var(--ov-dur-fast) var(--ov-ease);
}
html.vqr-theme-site .overview-kpi-card:hover{
  transform:translateY(-1px);
  border-color:var(--ov-border-strong) !important;
}
html.vqr-theme-site .overview-kpi-icon,
html.vqr-theme-site .overview-kpi-icon--blue,
html.vqr-theme-site .overview-kpi-icon--cyan,
html.vqr-theme-site .overview-kpi-icon--orange,
html.vqr-theme-site .overview-kpi-icon--violet{
  position:absolute;
  top:14px;
  right:18px;
  width:40px !important;
  height:40px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--ov-r-md) !important;
  background:var(--ov-mint) !important;
  color:var(--ov-accent) !important;
}
html.vqr-theme-site .overview-kpi-icon svg{
  width:20px !important;
  height:20px !important;
}
html.vqr-theme-site .overview-kpi-card__title{
  color:var(--ov-ink-2) !important;
  font-size:12px;
  line-height:18px;
  font-weight:500 !important;
}
html.vqr-theme-site .overview-kpi-card__scope{
  color:var(--ov-ink-3) !important;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html.vqr-theme-site .overview-kpi-card__value{
  color:var(--ov-ink) !important;
  font-size:30px;
  line-height:36px;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums;
  margin:2px 0 0;
}
html.vqr-theme-site .overview-kpi-card__delta{
  color:var(--ov-ink-3) !important;
  font-size:12px;
  margin:2px 0 0;
}
html.vqr-theme-site .overview-kpi-card__delta-trend--up{
  color:var(--ov-success) !important;
}
html.vqr-theme-site .overview-kpi-card__delta-trend--down{
  color:var(--ov-danger) !important;
}
/* v3 的 KPI 结构＝标题→数值→环比，无迷你走势线；96px 卡内容不下，隐藏。
   厂商规则是运行时注入的三类名高权重链，必须 !important */
html.vqr-theme-site .overview-kpi-card__sparkline{
  display:none !important;
}
/* 卡片标题层级：h2 15/22 600（§3） */
html.vqr-theme-site .overview-video-trends-section__title,
html.vqr-theme-site .overview-ranking-tables-section__title,
html.vqr-theme-site .overview-rich-panel__head h2,
html.vqr-theme-site .overview-watch__panel-head h3,
html.vqr-theme-site .overview-watch__title{
  color:var(--ov-ink) !important;
  font-size:15px !important;
  line-height:22px;
  font-weight:600 !important;
  letter-spacing:0;
}

/* =========================================================================
   两段式卡片头（§6.2-2）：标题左 + tabs 右；时间范围独占次行靠左
   ========================================================================= */
html.vqr-theme-site .overview-video-trends-section__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
html.vqr-theme-site .overview-video-trends-section__filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px !important;
  margin-top:4px;
}
/* 分段控件（§7.3）：槽 surface-2 + r-md + 3px 内边距；激活白底+边框+深绿字 */
html.vqr-theme-site .overview-video-trends-section__tabs{
  display:flex;
  gap:2px !important;
  padding:3px !important;
  background:var(--ov-surface-2) !important;
  border-radius:var(--ov-r-md) !important;
}
html.vqr-theme-site .overview-video-trends-section__tab{
  height:32px;
  padding:0 12px !important;
  display:inline-flex;
  align-items:center;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:var(--ov-r-sm) !important;
  color:var(--ov-ink-2) !important;
  font-size:13px;
  transition:background-color var(--ov-dur-fast) var(--ov-ease),color var(--ov-dur-fast) var(--ov-ease);
}
html.vqr-theme-site .overview-video-trends-section__tab:hover{
  color:var(--ov-ink) !important;
  background:rgba(255,255,255,.6) !important;
}
html.vqr-theme-site .overview-video-trends-section__tab--active{
  background:var(--ov-surface) !important;
  border-color:var(--ov-border) !important;
  color:var(--ov-accent-text) !important;
  font-weight:600;
  box-shadow:var(--ov-shadow-1);
}
/* 筛选 chip（§7.4）：pill、默认白底边框、激活浅绿底+绿框+绿字 */
html.vqr-theme-site .overview-video-trends-section__filter{
  height:32px;
  padding:0 14px !important;
  display:inline-flex;
  align-items:center;
  background:var(--ov-surface) !important;
  border:1px solid var(--ov-border) !important;
  border-radius:var(--ov-r-pill) !important;
  color:var(--ov-ink-2) !important;
  font-size:13px;
  transition:background-color var(--ov-dur-fast) var(--ov-ease),border-color var(--ov-dur-fast) var(--ov-ease);
}
html.vqr-theme-site .overview-video-trends-section__filter:hover{
  background:var(--ov-surface-2) !important;
  color:var(--ov-ink) !important;
}
html.vqr-theme-site .overview-video-trends-section__filter--active{
  background:var(--ov-accent-soft) !important;
  border-color:var(--ov-accent) !important;
  color:var(--ov-accent-text) !important;
  font-weight:600;
}
html.vqr-theme-site .overview-video-trends-section__custom-label,
html.vqr-theme-site .overview-video-trends-section__date-separator{
  color:var(--ov-ink-3) !important;
  font-size:12px;
}
/* 日期输入（§7.9 + §13-7）：surface-2 填充；:focus-within 一并给焦点环 */
html.vqr-theme-site .overview-video-trends-section__date{
  height:32px;
  padding:0 10px;
  background:var(--ov-surface-2);
  border:1px solid var(--ov-border) !important;
  border-radius:var(--ov-r-sm) !important;
  color:var(--ov-ink-2);
  font-family:var(--ov-font-mono);
  font-size:12px;
}
html.vqr-theme-site .overview-video-trends-section__date:focus,
html.vqr-theme-site .overview-video-trends-section__date:focus-within{
  border-color:var(--ov-accent) !important;
  box-shadow:0 0 0 3px var(--ov-accent-soft);
  outline:none;
}

/* =========================================================================
   漏斗（§7.6）：单色绿阶 5 级、块高 42、文字随底色反转
   ========================================================================= */
html.vqr-theme-site .overview-funnel-viz__block{
  height:42px !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-variant-numeric:tabular-nums;
}
html.vqr-theme-site .overview-funnel-viz__row:nth-child(1) .overview-funnel-viz__block{
  background-color:#E8F7EF !important;
}
html.vqr-theme-site .overview-funnel-viz__row:nth-child(2) .overview-funnel-viz__block{
  background-color:#BFE9D3 !important;
}
html.vqr-theme-site .overview-funnel-viz__row:nth-child(3) .overview-funnel-viz__block{
  background-color:#8FD6B4 !important;
}
html.vqr-theme-site .overview-funnel-viz__row:nth-child(4) .overview-funnel-viz__block{
  background-color:#2FA672 !important;
}
html.vqr-theme-site .overview-funnel-viz__row:nth-child(5) .overview-funnel-viz__block{
  background-color:#146B4B !important;
}
/* 浅阶深绿字 / 深阶白字 */
html.vqr-theme-site .overview-funnel-viz__row:nth-child(-n+3) .overview-funnel-viz__block,
html.vqr-theme-site .overview-funnel-viz__row:nth-child(-n+3) .overview-funnel-viz__uv{
  color:#0B4A34 !important;
}
html.vqr-theme-site .overview-funnel-viz__row:nth-child(n+4) .overview-funnel-viz__block,
html.vqr-theme-site .overview-funnel-viz__row:nth-child(n+4) .overview-funnel-viz__uv{
  color:#FFFFFF !important;
}
html.vqr-theme-site .overview-funnel-viz__label{
  color:var(--ov-ink-2) !important;
  font-size:13px;
}
html.vqr-theme-site .overview-funnel-viz__rate{
  color:var(--ov-ink-3) !important;
  font-variant-numeric:tabular-nums;
}
html.vqr-theme-site .overview-watch__panel-head>span,
html.vqr-theme-site .overview-watch__panel-head>a{
  color:var(--ov-ink-3) !important;
}

/* =========================================================================
   卡片底部动作 → 通栏动作行（§6.2-3）
   ========================================================================= */
html.vqr-theme-site .overview-ranking-tables-section__footer-link,
html.vqr-theme-site .overview-rich-panel__footer-link{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:calc(100% + 40px);
  margin:auto -20px -20px !important;
  padding:12px 0 !important;
  border-top:1px solid var(--ov-border);
  border-radius:0 0 var(--ov-r-lg) var(--ov-r-lg);
  background:transparent;
  color:var(--ov-accent-text) !important;
  font-size:13px;
  font-weight:500;
  text-decoration:none !important;
  transition:background-color var(--ov-dur-fast) var(--ov-ease);
}
html.vqr-theme-site .overview-ranking-tables-section__footer-link:hover,
html.vqr-theme-site .overview-rich-panel__footer-link:hover{
  background:var(--ov-surface-2) !important;
  text-decoration:none !important;
}

/* =========================================================================
   账号侧卡 / 配额（§13-6：value-inline 还原块级，值不再被推到最右）
   ========================================================================= */
html.vqr-theme-site .overview-quota__value-inline{
  display:block !important;
  text-align:left;
}
html.vqr-theme-site .overview-quota__user-section{
  border-top:1px solid var(--ov-border) !important;
}
html.vqr-theme-site .overview-quota__metric > i{
  background:var(--ov-surface-3) !important;
}
html.vqr-theme-site .overview-quota__metric > i em{
  background:var(--ov-accent) !important;
}

/* =========================================================================
   表格（§7.5）：表头 surface-2 / 12px 600 ink-3；行 hover surface-2
   ========================================================================= */
html.vqr-theme-site .plv-table-header{
  background:var(--ov-surface-2) !important;
}
html.vqr-theme-site .plv-table-header__th,
html.vqr-theme-site .plv-table-header__th__cell{
  color:var(--ov-ink-3) !important;
  font-size:12px !important;
  font-weight:600 !important;
}
html.vqr-theme-site .plv-table-body tr:hover .plv-table-body__td,
html.vqr-theme-site .plv-table-body__tr:hover .plv-table-body__td{
  background:var(--ov-surface-2) !important;
}

/* ---------- 输入框（§7.9）：surface-2 填充 + focus 绿框 + 浅绿光晕 ---------- */
html.vqr-theme-site .plv-input__main,
html.vqr-theme-site .plv-select__body,
html.vqr-theme-site .search-input{
  background:var(--ov-surface-2) !important;
}
html.vqr-theme-site .plv-input__main:focus-within,
html.vqr-theme-site .plv-select__body:focus-within{
  border-color:var(--ov-accent) !important;
  box-shadow:0 0 0 3px var(--ov-accent-soft) !important;
}

/* ---------- 弹窗（§7.8）：r-xl 18 + shadow-pop ---------- */
html.vqr-theme-site .plv-dialog__container{
  border-radius:var(--ov-r-xl) !important;
  box-shadow:var(--ov-shadow-pop) !important;
}

/* ---------- 图表序列（§2.4）：KPI sparkline 若后续恢复，用 v3 序列色 ---------- */
html.vqr-theme-site .overview-kpi-card__sparkline--blue path{stroke:var(--ov-series-1) !important;}
html.vqr-theme-site .overview-kpi-card__sparkline--cyan path{stroke:var(--ov-series-2) !important;}
html.vqr-theme-site .overview-kpi-card__sparkline--orange path{stroke:var(--ov-series-3) !important;}
html.vqr-theme-site .overview-kpi-card__sparkline--violet path{stroke:var(--ov-series-4) !important;}

/* ---------- 空态（§7.7）：说明文字 ink-3（按钮由产品侧提供，CSS 不造按钮） ---------- */
html.vqr-theme-site .plv-empty__description,
html.vqr-theme-site .overview-ranking-tables-section__empty,
html.vqr-theme-site .overview-rich-table__empty{
  color:var(--ov-ink-3) !important;
}

/* ---------- 经典模式切换器已下线（console.js 不再注入），无切换器样式 ---------- */

/* =========================================================================
   响应式（§8 + §13-8/§13-9）
   ========================================================================= */
/* 页面内边距（厂商 .main-content-shell 默认 18px 20px，≥1440 保持） */
@media (min-width:992px) and (max-width:1439px){
  html.vqr-theme-site .main-content-shell{padding:18px !important;}
}
@media (min-width:768px) and (max-width:991px){
  html.vqr-theme-site .main-content-shell{padding:16px 14px !important;}
}
@media (max-width:639px){
  html.vqr-theme-site .main-content-shell{padding:12px !important;}
}

/* 图表行 / 底部行比例 */
@media (min-width:1440px){
  html.vqr-theme-site .overview-analysis-row{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) !important;}
  html.vqr-theme-site .overview-bottom-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.62fr) !important;}
}
@media (min-width:1200px) and (max-width:1439px){
  html.vqr-theme-site .overview-analysis-row{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) !important;}
  html.vqr-theme-site .overview-bottom-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}
  html.vqr-theme-site .overview-bottom-row .overview-side-card{grid-column:1 / -1;}
}
@media (max-width:1199px){
  html.vqr-theme-site .overview-analysis-row,
  html.vqr-theme-site .overview-bottom-row{grid-template-columns:minmax(0,1fr) !important;}
}

/* KPI 列数：≥1200 四列 / 640–1199 两列 / ≤639 一列（§8） */
@media (min-width:1200px){
  html.vqr-theme-site .overview-kpi-row-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media (min-width:640px) and (max-width:1199px){
  html.vqr-theme-site .overview-kpi-row-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:639px){
  html.vqr-theme-site .overview-kpi-row-grid{grid-template-columns:minmax(0,1fr) !important;}
}

/* ≤991：侧栏强制 64px rail（§8/§13-8），顶栏厂商已有 width:100%!important */
@media (max-width:991px){
  html.vqr-theme-site .sidebar-container{
    --main-sidebar-width:64px !important;
  }
  html.vqr-theme-site .app-nav-bar .pwc-menu-item__title,
  html.vqr-theme-site .app-nav-bar .pwc-sub-menu__title{
    display:none !important;
  }
  html.vqr-theme-site .pwc-sub-menu__children{
    display:none !important;
  }
  html.vqr-theme-site .app-nav-bar .pwc-menu-item__content,
  html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content{
    justify-content:center;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  html.vqr-theme-site .app-nav-bar .pwc-menu-item__content.is-active,
  html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content.is-active{
    background:transparent !important;
  }
  html.vqr-theme-site .app-nav-bar .menu-item-new .pwc-menu-item__content:after,
  html.vqr-theme-site .app-nav-bar .pwc-menu-item.menu-item-beta>.pwc-menu-item__content:after,
  html.vqr-theme-site .app-nav-bar .pwc-sub-menu.menu-item-beta>.pwc-sub-menu__wrap>.pwc-sub-menu__content:after{
    display:none !important;
  }
  html.vqr-theme-site .sidebar-brand-wordmark{
    display:none;
  }
  html.vqr-theme-site .sidebar-brand-link{
    justify-content:center;
    margin:0;
  }
}
/* ≤639：隐藏邮箱 chip，工具条仍单行；触控目标 ≥44（§8/§9） */
@media (max-width:639px){
  html.vqr-theme-site .top-nav-bar .tools > *:last-child{
    display:none !important;
  }
  html.vqr-theme-site .top-nav-bar .tools > *:nth-last-child(2){
    border-radius:0 var(--ov-r-pill) var(--ov-r-pill) 0;
  }
  html.vqr-theme-site .top-nav-bar .tools > *{
    height:44px;
    padding:0 10px;
    font-size:13px;
  }
  html.vqr-theme-site .app-nav-bar .pwc-menu-item__content,
  html.vqr-theme-site .app-nav-bar .pwc-sub-menu__content{
    min-height:44px;
  }
}

/* =========================================================================
   14. 聚合页编辑器顶栏（#/secure/custom-page/create）
   =========================================================================
   问题：`.editor-header` 是 nowrap 单行 flex，三个子块 header-left（页面名输入，
   约 300px）/ header-center（承载 5 个媒体按钮的 `.editor-material-toolbar`，
   最小内容宽 379px 且自身 nowrap）/ header-right（Vista previa、Guardar、
   Publicar，约 374px）在 ≤1400px 的可用宽度里放不下。
   厂商把 header-center 写成 `flex:1 1 0%` + `min-width:0`，它被压缩到 38px，
   而内部工具条无法收缩 → 居中溢出（左右各约 170px），直接盖住右侧操作按钮。
   命中测试表现：Plantillas / PDF 的点击落点是「Vista previa」的 span，
   用户看到的就是「这些按钮都失灵了」。

   修复：≤1400px 让顶栏换行，操作按钮留在第一行、媒体工具条独占第二行，
   从而每个按钮都有真实的可点击区域（不依赖 z-index 抢层层级）。
   ≥1401px 三块可并排放下，保持单行，不做任何改动。
   ========================================================================= */
@media (max-width:1400px){
  html.vqr-theme-site .custom-page-editor .editor-header{
    flex-wrap:wrap !important;
    row-gap:10px !important;
    align-items:center !important;
  }
  /* 第一行：页面名输入框（可伸缩）+ 右侧操作按钮组（固定宽、靠右） */
  html.vqr-theme-site .custom-page-editor .editor-header .header-left{
    order:1;
    flex:1 1 240px !important;
    min-width:0 !important;
  }
  html.vqr-theme-site .custom-page-editor .editor-header .header-right{
    order:2;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }
  /* 第二行：媒体工具条独占整行，左对齐、不再溢出父容器 */
  html.vqr-theme-site .custom-page-editor .editor-header .header-center{
    order:3;
    flex:1 1 100% !important;
    width:100% !important;
    min-width:0 !important;
    justify-content:flex-start !important;
  }
  html.vqr-theme-site .custom-page-editor .editor-material-toolbar{
    max-width:100% !important;
    overflow-x:auto;
    overscroll-behavior-x:contain;
  }
  /* 极窄情况下工具条横向滚动，隐藏滚动条保持视觉干净 */
  html.vqr-theme-site .custom-page-editor .editor-material-toolbar::-webkit-scrollbar{
    height:0;
  }
}

/* =========================================================================
   动效（§10）+ 减少动态偏好（§9-7）
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html.vqr-theme-site *,
  html.vqr-theme-site *::before,
  html.vqr-theme-site *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}