/* vkt Tally 计数器 —— 色块是数据，不是装饰
   每个组就是一块计数按钮（A组/B组/…），颜色承担功能识别，
   颜色固定不随机、文字一律白色、质感极简。 */

:root {
  --bg: #14161A;
  --surface: #1C1F25;
  --surface-2: #262A31;
  --text: #F2F5F8;
  --dim: #98A2B3;
  --border: #2F343C;
  --danger: #E11D48;
  --link: #6BA8FF;   /* 内容页里的链接：深色底上要够亮 */

  --tile-radius: 20px;
  --tile-gap: 12px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --topbar-h: 52px;
  --bottombar-h: 60px;
}

/* 浅色兜底：JS 里的 Theme.apply() 要等语言包 fetch 回来才跑，在那之前先按系统
   偏好上色。用户在设置里显式选的档位写在行内样式上，优先级高于这里。 */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F2EFE9;
    --surface: #FFFFFF;
    --surface-2: #EAE6DE;
    --text: #26282B;
    --dim: #6B6F76;
    --border: #DCD7CD;
    --danger: #C02447;
    --link: #1A6FD4;
  }
}

@media (min-width: 700px) {
  :root { --tile-gap: 16px; --topbar-h: 60px; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  html { color-scheme: light; }
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  /* 数字用等宽字形：值变化时数字不会左右抖 */
  font-variant-numeric: tabular-nums;
}

/* 开合一律用 hidden 属性（main.js 的 show/hide），这条保证 display 不被 .menu-list 等自身样式盖掉 */
[hidden] { display: none !important; }

/* ---------- 顶栏：统一壳（返回箭头 + 标题 + 折叠菜单） ---------- */

#topbar {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 10px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  background: transparent;
  color: var(--text);
}

.app-title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: 0 0 auto;
  border: 0;
  background: var(--surface-2);
  color: var(--dim);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}

.icon-btn.on { color: var(--text); }
.icon-btn.danger { color: var(--danger); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- 计数网格：满屏大色块 ---------- */

#grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  grid-auto-rows: 1fr;
  gap: var(--tile-gap);
  padding: var(--tile-gap);
  /* 手势全部由 JS 仲裁，页面不参与滚动/缩放 */
  touch-action: none;
  overflow: hidden;
}

.tile {
  position: relative;
  border: 0;
  border-radius: var(--tile-radius);
  background: var(--c);
  /* 极简质感：只加一点点亮度差 */
  box-shadow: inset 0 1px 0 var(--c-hi), inset 0 -2px 6px var(--c-lo);
  color: #fff;
  cursor: pointer;
  padding: 8px;
  min-width: 88px;
  /* 刻意不设 min-height：行高由 grid-auto-rows:1fr 均分剩余高度，硬留 88px 会让
     第 3 行（5 个组时）溢出被 #grid 的 overflow:hidden 裁掉，而 touch-action:none
     又不让滚 —— 那一行就永远点不到。矮屏改用下面的 max-height 媒体查询收窄。 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  font-family: inherit;
  will-change: transform;
}

.tile-v {
  /* 字号同时受宽度与高度约束：横屏（宽 800+ / 高 320~430）下 15vw 会比色块本身还高，
     数字会被 .tile 的 overflow:hidden 整个切掉。13vh 对应「3 行占满剩余高度」时的行高，
     竖屏时 15vw 永远更小，所以竖屏观感与改造前一致。 */
  font-size: min(15vw, 13vh, 104px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tile-v.long { font-size: min(9vw, 7vh, 64px); }

.tile-l {
  font-size: clamp(13px, 3.5vw, 18px);
  line-height: 1.2;
  opacity: 0.92;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}

.bubble-mark {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bubble-mark.go { animation: markFloat 700ms ease-out; }

@keyframes markFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.9); }
  20%  { opacity: 1; transform: translateY(-4px) scale(1); }
  70%  { opacity: 1; transform: translateY(-10px) scale(0.95); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.9); }
}

/* ---------- 编辑模式：色块上的删除徽标 ---------- */

.icon-btn.active { background: var(--text); color: var(--bg); }

.tile-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  display: none;             /* 只在编辑态出现 */
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 编辑态整体降一点亮度：暗示「现在点的不是计数」 */
#grid.editing .tile { filter: brightness(0.92); }
#grid.editing .tile-del { display: flex; }

/* ---------- 底栏：重置 / 编辑 / 添加组 / 声音 ---------- */

#bottomBar {
  flex: 0 0 auto;
  height: calc(var(--bottombar-h) + var(--safe-b));
  padding: 0 var(--tile-gap) var(--safe-b);
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
}

.add-btn {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-btn:active { background: var(--border); }
.add-ico { font-size: 17px; line-height: 1; }

#soundBtn.on { color: var(--text); }

/* ---------- 菜单（底部抽屉：拇指热区，与设置抽屉同款动效） ---------- */

.menu-list {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: 10px 12px calc(14px + var(--safe-b));
  background: var(--surface);
  color: var(--text);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  animation: sheetIn 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  background: none;
  color: var(--text);
  min-height: 52px;          /* ≥ 48px 触摸目标 */
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
}

.menu-item:active { background: var(--surface-2); }
.menu-ico { flex: 0 0 auto; font-size: 18px; width: 24px; text-align: center; }
.menu-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 占位页（菜单次级页面） ---------- */

.page-view {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

.page-head {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 10px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.page-title {
  flex: 1;
  font-size: 17px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.page-placeholder {
  font-size: 15px;
  color: var(--dim);
  text-align: center;
}

/* ---------- 内容页（说明：下半部分是联系作者 / 隐私政策） ---------- */

/* 占位页是一句居中的话；内容页是长文，要顶对齐、可滚动，长文不能居中 */
.page-view.doc .page-body {
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 18px 18px 28px;
}

.doc-block {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.doc-p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.doc-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  display: grid;
  gap: 8px;
}

.doc-list li { list-style: disc; }

/* 分节标题：把「怎么用」和「联系作者 / 隐私政策」分开。
   不画上边框 —— 它上面那条 .doc-note 已经有 border-top，再画一条就是双线。 */
.doc-h {
  font-size: 14px;
  font-weight: 600;
  margin: 24px 0 10px;
}

.doc-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.doc-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.doc-k {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--dim);
}

.doc-link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--link);
  text-decoration: none;
  /* 邮箱/长 URL 不许把行撑破 */
  overflow-wrap: anywhere;
}

.doc-link:active { opacity: .7; }

/* ---------- 设置抽屉 ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  background: var(--surface);
  color: var(--text);
  border-radius: 22px 22px 0 0;
  padding: 18px 20px calc(20px + var(--safe-b));
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  animation: sheetIn 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sheet-head h2 { font-size: 17px; margin: 0; }

.field-label {
  display: block;
  font-size: 13px;
  color: var(--dim);
  margin: 16px 0 8px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.sw-label { flex: 1; }

.switch-row input[type="checkbox"] {
  width: 46px;
  height: 27px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 0;
  flex: 0 0 auto;
  transition: background 150ms;
}

.switch-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--dim);
  transition: transform 150ms, background 150ms;
}

.switch-row input[type="checkbox"]:checked { background: var(--surface-2); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(19px); background: var(--text); }
.switch-row input[type="checkbox"]:disabled { opacity: 0.4; }

.danger-zone {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.note { font-size: 13px; color: var(--dim); margin: 10px 0 0; }
.install-later { margin-top: 16px; }

/* 主题三档 */
.theme-row { display: flex; gap: 8px; }

.theme-chip {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.theme-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.lang-row { display: flex; flex-wrap: wrap; gap: 8px; }

.lang-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.lang-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- 按钮 ---------- */

.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

.btn.primary { background: var(--text); color: var(--bg); }
.btn.primary:disabled { opacity: 0.5; }
.btn.ghost { background: var(--surface-2); color: var(--text); }
.btn.ghost:disabled { opacity: 0.4; cursor: default; }
.btn.danger { background: var(--danger); color: #fff; }

/* ---------- 登录 / 个人信息抽屉 ---------- */

.input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.input:focus { outline: none; border-color: var(--text); }

.code-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* .btn 是 width:100%，直接丢进这一行会抢满整行、把验证码输入框挤成一个小方块；
   这里把按钮改回「按内容宽度」，剩下的宽度全给输入框。 */
.code-row .code-input { flex: 1 1 auto; min-width: 0; }
.code-row .btn { flex: 0 0 auto; width: auto; white-space: nowrap; }

/* Turnstile 用 interaction-only：平时完全隐形、高度 0（没有复选框，也没有 Cloudflare
   logo 和「验证·隐私」那行小字），只有 Cloudflare 真要用户点一下时才现形。
   所以这里不再预留 65px，渲染出东西来才给顶部间距。 */
.turnstile-box { margin-top: 0; }
.turnstile-box:not(:empty) { margin-top: 12px; }

.form-msg {
  min-height: 18px;
  margin: 10px 0 2px;
  font-size: 13px;
  color: var(--danger);
  word-break: break-word;
}

.form-msg.ok { color: #2e9e5b; }

/* 人机校验未就绪时的说明行（比错误红字弱一档：它是状态，不是用户做错了什么） */
.form-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  word-break: break-word;
}

.or-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}

.or-line { flex: 1; height: 1px; background: var(--border); }
.or-txt { font-size: 12px; color: var(--dim); }

/* Google 官方按钮样式：白底描边 + 四色 G，深浅主题都不变（品牌规范） */
.btn.google {
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.g-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- 资料顶部的头像 + 昵称 ---------- */
.profile-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.profile-id { flex: 1; min-width: 0; }
.avatar {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--surface-2);
  font-size: 20px; font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-nick {
  margin: 0; font-size: 16px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-email {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--dim);
  word-break: break-all;
}

.user-line { margin: 6px 0; font-size: 14px; color: var(--dim); }

#authLoginArea .btn { margin-top: 10px; }
/* 资料视图里两颗按钮（退出登录 / 退出所有设备）贴着排，得留出间距别挤成一块 */
#authUserArea .btn + .btn { margin-top: 8px; }

/* ---------- 弹窗 ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  color: var(--text);
  border-radius: 18px;
  padding: 22px 20px;
}

.modal-card h3 { font-size: 17px; margin: 0 0 8px; }
.modal-card p { font-size: 14px; color: var(--dim); margin: 0 0 16px; }

.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  top: calc(var(--topbar-h) + var(--safe-t) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  max-width: 86vw;
  text-align: center;
  pointer-events: none;
}

/* ---------- 键盘焦点：桌面 / 外接键盘能看清焦点在哪 ---------- */

.tile:focus-visible,
.icon-btn:focus-visible,
.btn:focus-visible,
.add-btn:focus-visible,
.menu-item:focus-visible,
.theme-chip:focus-visible,
.lang-chip:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ---------- 减弱动效：只留亮度闪烁 ---------- */

@media (prefers-reduced-motion: reduce) {
  .bubble-mark { display: none; }
  .ripple { display: none; }
  .switch-row input[type="checkbox"],
  .switch-row input[type="checkbox"]::after { transition: none; }
  .sheet { animation: none; }
}

/* ---------- 横屏极矮屏：把高度让给色块 ----------
   放在文件末尾是必需的：这里要覆盖 .tile / .tile-v / .tile-l / .tile-del / .menu-item
   的既有声明，而它们都写在上面，同权重下只有靠后的一条才生效（写在中途会被下面的
   基础规则反盖回去，媒体查询静默失效）。

   动机：手机横放时视口高度常在 320–430px，顶栏 52 + 底栏 60 + 网格内边距 + 两处行距
   就要吃掉约 160px，5 个组（3 行）在旧参数下必然溢出；#grid 是 overflow:hidden 且
   touch-action:none，溢出部分既看不见也点不到。收窄顶栏/底栏/间距后，配合 .tile-v
   的 vh 字号，任何高度下 3 行都装得下，不需要滚动。 */
@media (max-height: 460px) {
  :root {
    --topbar-h: 46px;
    --bottombar-h: 52px;
    --tile-gap: 8px;
    --tile-radius: 14px;
  }
  .tile { padding: 6px; }
  .tile-v { font-size: min(15vw, 11vh, 104px); }
  .tile-v.long { font-size: min(9vw, 7vh, 64px); }
  .tile-l { font-size: 12px; }
  .tile-del { width: 26px; height: 26px; line-height: 26px; font-size: 17px; }
  /* 菜单项别撑到 52px 高，否则 6 项抽屉在矮屏会顶到屏幕上沿 */
  .menu-item { min-height: 44px; padding: 8px 14px; }
}