/* MOS commercial polish layer — panels; loaded after styles.css
   C2 · 商业化视觉改版（功能面板精修，2026-09-08）
   Scope: 资源窗口（tabs/设备 chips/空态）、商店 tab（分段筛选/卡片统一）、
   设置窗口（tab nav/语言网格/分组卡片/订阅价格卡）与全局细节（滚动条/焦点环/按钮过渡）。
   Rules:
   - 只追加覆盖层，不改 styles.css；本文件天然后加载，同特异性即胜出，不用 !important。
   - 全部走 var(--*) token（token 定义以 styles.css 为单一事实来源），不假设 data-theme 值；
     nexus 主题自身更高特异性的规则（如滚动条）继续生效。
   - 尺寸一律 clamp/百分比（§4），不写死核心宽度，无新增 media query。 */

/* ============================================================
   0. Tokens（--radius-sm / --radius-md / --shadow-sm / --shadow-md
   统一消费 styles.css 的定义（单一事实来源，light 主题为其减淡变体）；
   C2 修正：polish.css 不再自定义同名 token，仅经 var() 引用）
   ============================================================ */

/* ============================================================
   1. 全局细节：细滚动条 / 焦点环 / 按钮统一过渡
   ============================================================ */
/* 细滚动条（webkit + firefox；6px、圆角、hover 加深）。
   styles.css 中 scrollbar-width:none 的隐藏规则（手机 tab nav 等）类特异性
   更高，继续隐藏；nexus.css 的 [data-theme="nexus"] 滚动条特异性更高，保留其样式。 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 60%, transparent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
}

/* 键盘焦点环；styles.css 中类作用域的 :focus-visible 规则特异性更高，各自保留。 */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline-offset: 2px;
}

/* 控件统一 150ms 过渡。用元素级（低特异性）选择器，既有类级 transition 规则仍优先。 */
button,
[role="button"],
a.btn {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

/* ============================================================
   2. 分段控件（共享）：胶囊容器 + 激活项 accent 底色白字
   使用方：资源页顶部 tab 行（.tabs.seg-control）、设备 在线/历史 子 tab
   （.device-subtabs.seg-control）、商店平台筛选（.store-platform-seg）。
   窄屏自然换行（flex-wrap），无写死宽度。
   ============================================================ */
.seg-control {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.15rem, 0.6vw, 0.25rem);
  max-width: 100%;
  padding: clamp(0.18rem, 0.6vw, 0.28rem);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(8px);
}

.seg-control > button {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: clamp(0.38rem, 1.1vw, 0.48rem) clamp(0.8rem, 2.2vw, 1.1rem);
  font-size: clamp(0.76rem, 1.6vw, 0.86rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.seg-control > button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 75%, transparent);
}

.seg-control > button.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ============================================================
   3. 资源窗口：设备 chips + 空态块
   ============================================================ */
/* 设备 chip：去掉 Rust 侧 6 字符预截断后，改由 CSS 控制溢出——
   min 宽度=内容、max-width 封顶、超出 ellipsis。inline-block（替代原
   inline-flex）使 text-overflow 对内部文本生效；chip 在 .device-select-strip
   中是 flex 子项，外层布局不变。类型小图标沿用既有 .device-os-icon
   （data-platform 掩码图标）。 */
.device-select-chip {
  display: inline-block;
  max-width: clamp(8.5rem, 26vw, 13rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.device-select-chip .device-os-icon {
  vertical-align: -0.18em;
  margin-inline-end: 0.3rem;
}

.device-select-chip .device-chip-menu-dot {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 0.3rem;
}

.device-select-chip:hover:not(.active) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

/* 空态块：居中图标 + 说明文字（+ 可选主按钮）。
   资源窗口用于：设备列表空态（rc-empty-icon-device）、
   「获取应用」引导区（rc-empty-icon-apps，resource.rs 渲染按钮）。 */
.rc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1.4vh, 0.65rem);
  padding: clamp(1.6rem, 6vh, 3.2rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}

.rc-empty-state .rc-empty-text {
  margin: 0;
  max-width: 38ch;
  color: var(--muted);
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  line-height: 1.5;
}

.rc-empty-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(2.6rem, 7vw, 3.4rem);
  height: clamp(2.6rem, 7vw, 3.4rem);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.rc-empty-icon::before {
  content: "";
  width: 46%;
  height: 46%;
  background: var(--accent);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

/* 显示器图标 —— 设备列表空态 */
.rc-empty-icon-device::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='13' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9 21h6M12 17.5V21' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='13' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9 21h6M12 17.5V21' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 应用九宫格图标 —— 「获取应用」引导区 */
.rc-empty-icon-apps::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5' fill='%23000'/%3E%3C/svg%3E");
}

/* 空态主按钮：全局 .btn.primary 是 width:100%，空态内改为内容宽度封底。 */
.rc-empty-state .btn.primary {
  width: auto;
  min-width: clamp(7rem, 20vw, 9.5rem);
  margin-top: clamp(0.15rem, 1vh, 0.35rem);
}

/* ============================================================
   4. 商店 tab：搜索框 / 卡片网格统一 / 来源 chip / 空态
   ============================================================ */
.store-search-input {
  border-radius: 999px;
  padding-inline: clamp(0.8rem, 2vw, 1rem);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-search-input:focus,
.store-search-input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

/* 搜索/榜单卡片网格：gap / radius / shadow 统一 */
.store-grid,
.store-rank-row {
  gap: clamp(0.7rem, 1.4vw, 1.05rem);
}

.store-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.store-card:hover,
.store-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.store-rank-badge {
  box-shadow: var(--shadow-sm);
}

/* 二级来源 chip（多选）：hover 提亮 + 激活底色 */
.store-source-chip {
  border-radius: 999px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.store-source-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--text);
}

.store-source-chip.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* 商店空态（未选任何榜单来源）：补图标，与资源窗口空态同语言 */
.store-empty::before {
  content: "";
  display: block;
  margin: 0 auto clamp(0.55rem, 1.6vh, 0.8rem);
  width: clamp(2rem, 5vw, 2.6rem);
  height: clamp(2rem, 5vw, 2.6rem);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 7.5h11l1 12a2 2 0 0 1-2 2.2h-9a2 2 0 0 1-2-2.2l1-12z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 7.5V6a3 3 0 0 1 6 0v1.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 7.5h11l1 12a2 2 0 0 1-2 2.2h-9a2 2 0 0 1-2-2.2l1-12z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 7.5V6a3 3 0 0 1 6 0v1.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.store-empty .muted {
  max-width: 38ch;
  margin-inline: auto;
  font-size: clamp(0.8rem, 1.8vw, 0.9rem);
}

/* ============================================================
   5. 设置窗口
   ============================================================ */
/* 5.1 tab nav（账号/钱包/同步/桌面/实名/关于/管理）：
   与资源 tab 同分段控件语言。成对写 .desktop-root 作用域以覆盖
   styles.css 中同特异性规则（本文件后加载）。 */
.settings-tab-nav,
.desktop-root .settings-tab-nav {
  gap: clamp(0.15rem, 0.6vw, 0.25rem);
  padding: clamp(0.18rem, 0.6vw, 0.28rem);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.settings-tab-btn,
.desktop-root .settings-tab-btn {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.settings-tab-btn:hover,
.desktop-root .settings-tab-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 75%, transparent);
}

.settings-tab-btn.active,
.desktop-root .settings-tab-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* 5.2 语言选择（设置页内 10 个语言 chip）：重排为紧凑对齐网格。
   尺寸封顶 2.25rem（36px）以内；hover 提亮；激活 accent 边框+底色。
   组件结构与逻辑不变（LanguagePicker），仅样式覆盖。 */
.account-compact-lang .boot-auth-lang-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(1.9rem, 5vw, 2.25rem), 1fr));
  gap: clamp(0.28rem, 0.8vw, 0.38rem);
  max-width: min(100%, 15rem);
}

.account-compact-lang .boot-auth-lang-btn {
  width: 100%;
  height: clamp(1.9rem, 5vw, 2.25rem);
  border-radius: clamp(0.55rem, 1.6vw, 0.7rem);
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}

.account-compact-lang .boot-auth-lang-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.account-compact-lang .boot-auth-lang-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* 5.3 设置分区卡片化：语言/账号/联系/订阅 各组（.account-compact-row）
   变为圆角卡片容器，组标题缩小为 muted 小字；AI 用量面板同样处理。 */
.pref-account .account-compact {
  gap: clamp(0.6rem, 1.6vw, 0.85rem);
}

.pref-account .account-compact-row {
  padding: clamp(0.7rem, 1.8vw, 0.9rem) clamp(0.8rem, 2vw, 1.05rem);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 40%, transparent);
}

.pref-account .account-compact-label {
  font-size: clamp(0.68rem, 1.4vw, 0.74rem);
  letter-spacing: 0.05em;
  color: var(--muted);
}

.pref-account .account-compact-lang .boot-auth-lang-label {
  font-size: clamp(0.68rem, 1.4vw, 0.74rem);
  letter-spacing: 0.05em;
  color: var(--muted);
}

.pref-account .ai-billing-panel {
  padding: clamp(0.7rem, 1.8vw, 0.9rem) clamp(0.8rem, 2vw, 1.05rem);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 40%, transparent);
}

/* 5.4 订阅价格卡：价格数字 20px/700 + accent，周期小字 muted，
   CTA 全宽渐变 accent，卡片 hover --shadow-md。网格列放宽避免按钮截断。 */
.pref-account .plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(9.5rem, 24vw, 12.5rem)), 1fr));
  gap: clamp(0.55rem, 1.3vw, 0.8rem);
}

.pref-account .plan-card {
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--border) 90%, transparent);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pref-account .plan-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pref-account .plan-card .plan-price {
  font-size: clamp(1.15rem, 2.4vw, 1.25rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.pref-account .plan-card .plan-period {
  color: var(--muted);
  font-size: clamp(0.68rem, 1.4vw, 0.74rem);
}

.pref-account .plan-card .btn.primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #22d3ee));
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: clamp(0.76rem, 1.6vw, 0.85rem);
  padding: clamp(0.42rem, 1.2vw, 0.52rem) 0.6rem;
  white-space: nowrap;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent);
}

.pref-account .plan-card .btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-hover), color-mix(in srgb, var(--accent-hover) 62%, #22d3ee));
  filter: brightness(1.05);
}

.pref-account .plan-card .btn.primary:disabled {
  opacity: 0.55;
  box-shadow: none;
}
/* 商店袋图标 —— 市场空态（主会话兜底：F3 因 API 故障中断后接手） */
.rc-empty-icon-market::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l1 12H5L6 8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l1 12H5L6 8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============================================================
   6. 远程悬浮栏：通道选择 chip（L5 串流 / L6 RDP）
   2026-09-09 原 remote-mode-bar 第二行收纳进悬浮栏后的紧凑 select：
   背景/边框/字色复用 styles.css 的 .remote-titlebar-chip 基类，这里
   只做 select 专属微调——高度/字号与 chip 行对齐（clamp），右侧多留
   一点给保留下来的原生下拉箭头（不做 appearance:none）。仅桌面远程
   窗口渲染此 chip（app 子窗 L5 单通道不渲染）；本文件在 styles.css
   之后加载，同特异性即胜出。手机档悬浮栏为单行滚动布局，chip 同样
   显示，无需 media query（§4/§5）。
   ============================================================ */
.remote-titlebar-chip.remote-titlebar-chip-mode {
  min-height: clamp(0.9rem, 2vh, 1.05rem);
  font-size: clamp(0.58rem, 1.2vw, 0.66rem);
  padding-inline: clamp(0.14rem, 0.45vw, 0.24rem) clamp(0.32rem, 1vw, 0.5rem);
}

/* 下拉选项配色跟随主题 token，避免原生菜单黑底黑字不可读 */
.remote-titlebar-chip.remote-titlebar-chip-mode option {
  background: var(--bg, #1f2937);
  color: var(--text, #e5e7eb);
}

/* 窗口栏尺寸回退（2026-09-09 用户指令：恢复 C1 改版前尺寸。styles.css 被并行会话占用，先落此处覆盖层；后续清理 C1 段时可把本段合并回 styles.css 并删除本段） */
.floating-titlebar {
  min-height: 0;
  padding: 0.16rem 0.32rem;
}

.window-ctrl {
  width: 0.8rem;
  min-width: 0.8rem;
  height: 1.2rem;
  border-radius: 4px;
}

.window-ctrl-svg {
  width: 0.55rem;
  height: 0.55rem;
}

.os-window-title {
  font-size: 0.72rem;
}