/* 四套皮肤预览 · 只做「舞台 + 重置 + 无障碍」。
 * 皮肤的一切视觉都写在自己的 HTML 里，这里不提供任何组件样式，
 * 免得四套又长成同一张脸（那是上一版被推翻的原因）。
 * 功能栏 / 导航 / 勾选这三件共用组件在 chrome.css，不在这里。 */

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

:root {
  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  --font-mono: "SFMono-Regular", Consolas, "Courier New", monospace;
  --font-round: "Yuanti SC", "YouYuan", "PingFang SC", sans-serif;

  /* 系统状态栏 / 手势条。Android 15 起强制边到边，Android 14 的 WebView
     也常常是透明状态栏：不给这层留白，刊头第一行就压在时间下面 ——
     老板说的「页面看不全」有一半是这里。env() 拿不到时至少让出 26px。 */
  --sq-safe-top: env(safe-area-inset-top, 0px);
  --sq-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sq-top: max(var(--sq-safe-top), 26px);
}

html, body { height: 100%; margin: 0; }

body {
  background: var(--desk, #101010);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 桌面端是一台手机；手机上就是全屏。 */
.sq-stage {
  position: relative;
  width: min(100vw, 420px);
  height: min(100dvh, 920px);
  overflow: hidden;
  isolation: isolate;
  background: var(--app-bg, #fff);
  /* 横滑交给页面里的「滑动返回」，竖滑仍是原生滚动 */
  touch-action: pan-y;
}

@media (min-width: 521px) {
  .sq-stage {
    width: 390px;
    height: 844px;
    border-radius: 26px;
    box-shadow: 0 44px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}

button, a { -webkit-tap-highlight-color: transparent; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
img { display: block; max-width: 100%; }
p, h1, h2, h3, h4 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 键盘可达性：只在键盘聚焦时出现，不破坏视觉 */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* 回总览：不抢戏，评审用 */
.sq-home {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  font: 500 10px/1 var(--font-ui);
  letter-spacing: .08em;
  color: #777;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  text-decoration: none;
  opacity: .38;
  transition: opacity .25s ease;
}
.sq-home:hover { opacity: 1; }
@media (max-width: 520px) { .sq-home { display: none; } }

/* 嵌入 PWA iframe 时：全屏、去掉回总览、去掉桌面手机框。 */
html.embed .sq-stage { width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; }
html.embed .sq-home { display: none !important; }
html.embed body { background: var(--app-bg); }

/* 通用波纹节点（core.js 生成） */
.sq-ripple { z-index: 8; }

/* 只让「装饰动效」降级，不让状态变化消失 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}