/* ============================================================================
 * ui-tune.css — 设备控制中心：只美化"外壳"，绝不碰画面元素
 * ----------------------------------------------------------------------------
 * 上一版的问题（导致投屏被遮挡）：
 *   · 给「画布容器 / 内容层」加了 background-image（径向渐变）→ 覆盖了应用放在
 *     同元素上的画面；也给它们加了 overflow / 圆角 / 盒阴影。
 *   · 对 canvas / img / video 强制 height:auto + max-height → 画面尺寸被改掉。
 *
 * 现在的原则（重要）：
 *   ✅ 只样式化"外壳"：面板外框、标题条、工具条、按钮、状态胶囊、输入条、导航键
 *   ❌ 不碰画布容器、内容层、占位层、canvas / img / video 的任何
 *      background / overflow / width / height / position / display 属性
 *      —— 这些由应用自己控制，改了就会遮住或挤坏画面。
 *
 * 撤销：删掉 index.html 里那行 <link .../ui-tune.css> 即可。
 * ==========================================================================*/

/* ============================================================
 * ① 两块面板的外框 = 设备卡片（玻璃 + 圆角 + 柔光 + 投影）
 *    —— 只包在外层，内部画面完全不动
 * ============================================================ */
.ctrl-screen-area > div > *:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* 每个面板（标题条 + 画面 + 底部条 的外框） */
.ctrl-screen-area > div > *:last-child > * {
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  box-sizing: border-box !important;
}

[data-theme=light] .ctrl-screen-area > div > *:last-child > * {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(15, 23, 42, .08) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
}

/* ============================================================
 * ② 工具条 / 标题条：平灰壳 → 玻璃面板
 * ============================================================ */
.reader-style-bar,
.a11y-screen-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

[data-theme=light] .reader-style-bar,
[data-theme=light] .a11y-screen-header {
  background: rgba(255, 255, 255, .9) !important;
  border-color: rgba(15, 23, 42, .08) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.a11y-screen-header span {
  letter-spacing: .01em;
}

/* 状态文字（— 未开启 / 已开启）→ 胶囊 */
.a11y-screen-header span[style*="margin-left"] {
  background: rgba(148, 163, 184, .16) !important;
  color: rgba(226, 232, 240, .82) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

[data-theme=light] .a11y-screen-header span[style*="margin-left"] {
  background: rgba(100, 116, 139, .12) !important;
  color: #475569 !important;
}

.a11y-screen-header > span:first-child {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04) !important;
}

/* ============================================================
 * ③ 按钮：统一胶囊；主操作（开启 / 录屏 / 投屏 的最后一个）用主色
 * ============================================================ */
.a11y-screen-header button,
.reader-style-bar button {
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: rgba(226, 232, 240, .9) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease, filter .15s ease !important;
}

.a11y-screen-header button:hover,
.reader-style-bar button:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

.a11y-screen-header button:last-of-type {
  background: var(--fc-accent, #2563eb) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fc-accent, #2563eb) 35%, transparent) !important;
}

.a11y-screen-header button:last-of-type:hover {
  filter: brightness(1.08);
}

[data-theme=light] .a11y-screen-header button,
[data-theme=light] .reader-style-bar button {
  border-color: rgba(15, 23, 42, .12) !important;
  background: rgba(15, 23, 42, .04) !important;
  color: #334155 !important;
}

/* ============================================================
 * ④ 底部输入条 / 导航键：一起融入（只动外壳与控件本身）
 * ============================================================ */
.a11y-text-input,
.a11y-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  padding: 0 8px !important;
}

[data-theme=light] .a11y-text-input,
[data-theme=light] .a11y-nav {
  background: rgba(255, 255, 255, .9) !important;
  border-color: rgba(15, 23, 42, .08) !important;
}

.a11y-text-input input {
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .05) !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  color: inherit !important;
}

.a11y-text-input input:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--fc-accent, #2563eb) 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-accent, #2563eb) 18%, transparent) !important;
}

.a11y-text-input button {
  height: 28px !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--fc-accent, #2563eb) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  cursor: pointer !important;
}

.a11y-nav button {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .05) !important;
  transition: background .15s ease, border-color .15s ease !important;
}

.a11y-nav button:hover {
  background: rgba(255, 255, 255, .11) !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

/* ============================================================
 * ⑤ 布局修正（与画面无关，安全）
 * ============================================================ */
.ctrl-screen-area {
  max-height: calc(100vh - 150px) !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  background: radial-gradient(120% 80% at 50% 0%, rgba(56, 189, 248, .05), transparent 62%) !important;
  box-sizing: border-box !important;
}

.ctrl-body {
  max-height: calc(100vh - 150px) !important;
  align-items: stretch !important;
  flex: 2.6 1 420px !important;
  min-width: 0 !important;
}

.ctrl-screen-area,
.ctrl-sidebar-panel {
  height: auto !important;
}

.ctrl-sidebar-panel {
  flex: 1 1 260px !important;
  min-width: 240px !important;
}

.control-page > *:has(> .ctrl-body),
.main-content > *:has(> .ctrl-body),
div:has(> .ctrl-body):not(:has(> .ctrl-body > .ctrl-body)) {
  flex-wrap: wrap !important;
  row-gap: 12px !important;
  align-content: flex-start !important;
}


.ctrl-body + *,
.control-page > *:has(.ctrl-sidebar-panel) ~ * {
  padding-bottom: 84px !important;
}

.reader-style-bar {
  flex-wrap: wrap !important;
  row-gap: 6px !important;
}

/* 工具条控件 */
.reader-style-bar input[type="color"] {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
}

/* ============================================================
 * ⑥ 修复：无障碍「投屏」提示确认框被下方画面遮挡、点不了
 * ------------------------------------------------------------
 * 根因：确认弹层是 .a11y-screen-header 内部用 position:absolute;
 *   top:100%; z-index:10 向下延伸到画面区的。liquid-glass.css 给
 *   标题条加了 backdrop-filter，而 backdrop-filter 会创建独立的
 *   层叠上下文，把弹层的 z-index:10 困死在标题条内；标题条本身
 *   z-index:auto(0)，画面区是它后面的兄弟节点，于是画面盖住了弹层。
 * 解法：给标题条一个高于画面区的 z-index，让整个标题条层叠上下文
 *   （含其内部弹层）浮到画面之上。撤销：删掉本段即可。
 * ============================================================ */
.a11y-screen-header {
  z-index: 30 !important;
}

/* 弹层兜底：确保确认框始终位于画面/占位层之上 */
.a11y-screen-header > div[style*="position: absolute"],
.a11y-screen-header > div[style*="top: 100%"] {
  z-index: 40 !important;
}

.reader-style-bar select {
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: inherit !important;
  font-size: 11px !important;
}