/* 二游日历 · 预览样式
   ─────────────────────────────────────────────────────────
   本文件只负责**结构**，所有颜色/字号/圆角/间距都来自 CSS 变量，
   由 apps/preview/src/design.ts 的 applyTheme() 按平台注入。

   变量来源：
     --c-*  颜色      --t-*  字体（size / lh / weight / tracking）
     --m-*  尺寸      （见 design.ts 的 PlatformSpec）

   :root 里只放"JS 尚未执行时"的兜底值，避免首帧无样式。
   规范出处与阈值见 docs/DESIGN.md，符合性由 apps/preview/test/design.test.ts 强制。
   ───────────────────────────────────────────────────────── */

:root {
  /* 兜底 = iOS 皮肤，仅为避免首帧闪烁；真实值由 applyTheme 注入 */
  --c-bg: #000000;
  --c-surface: #0b0b0d;
  --c-card: #1c1c1e;
  --c-card-alt: #2c2c2e;
  --c-line: #38383a;
  --c-text: #ffffff;
  --c-text-secondary: #d1d1d6;
  --c-text-tertiary: #aeaeb2;
  --c-accent: #0a84ff;
  --c-accent-soft: rgba(10, 132, 255, 0.16);
  --c-danger: #ff6961;
  --c-warn: #ffd60a;
  --c-ok: #30d158;

  --t-brand-size: 22px;
  --t-brand-lh: 28px;
  --t-brand-weight: 700;
  --t-card-title-size: 17px;
  --t-card-title-lh: 22px;
  --t-card-title-weight: 600;
  --t-game-name-size: 13px;
  --t-game-name-lh: 18px;
  --t-range-size: 13px;
  --t-range-weight: 400;
  --t-remain-size: 15px;
  --t-remain-lh: 20px;
  --t-remain-weight: 600;
  --t-section-title-size: 13px;
  --t-section-title-weight: 600;
  --t-badge-size: 11px;
  --t-tab-label-size: 10px;

  --m-side-margin: 16px;
  --m-card-radius: 12px;
  --m-card-gap: 8px;
  --m-card-padding-y: 12px;
  --m-card-padding-x: 13px;
  --m-tabbar-height: 58px;
  --m-tabbar-inset: 0px;
  --m-tabbar-radius: 0px;
  --m-touch-min: 44px;
  --m-icon-button: 44px;
  --m-motion-fast: 200ms;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  background: #050506;
  color: var(--c-text);
  font-family: system-ui, -apple-system, "Segoe UI", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  overflow: hidden;
  position: relative;
}

@media (min-width: 560px) {
  body {
    align-items: center;
    padding: 20px 0;
  }
  .app {
    height: min(860px, calc(100dvh - 40px));
    border-radius: 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--c-line), 0 0 0 9px #0a0c11;
  }
}

/* ── 顶栏 ─────────────────────────────────────────────── */
.topbar {
  flex: none;
  padding: 14px var(--m-side-margin) 10px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  z-index: 3;
}

.topbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  font-size: var(--t-brand-size);
  line-height: var(--t-brand-lh);
  font-weight: var(--t-brand-weight);
  letter-spacing: 0.2px;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand .tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* 图标按钮：尺寸来自触控目标 token，保证可点 */
.icon-btn {
  flex: none;
  width: var(--m-icon-button);
  height: var(--m-icon-button);
  display: grid;
  place-items: center;
  border-radius: calc(var(--m-icon-button) / 2);
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: background var(--m-motion-fast) ease, color var(--m-motion-fast) ease;
}
.icon-btn:hover {
  background: var(--c-card-alt);
  color: var(--c-text);
}
.icon-btn:active {
  background: var(--c-card-alt);
}
.icon-btn .ico svg {
  width: 18px;
  height: 18px;
  display: block;
}
.icon-btn.spinning .ico {
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.topbar-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-text-tertiary);
}
.topbar-meta .today {
  color: var(--c-text-secondary);
}
.topbar-meta .sep {
  opacity: 0.5;
}
.src {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.src::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.src.live {
  color: var(--c-ok);
}
.src.snapshot {
  color: var(--c-warn);
}

.banner-tip {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-secondary);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 8px 10px;
}
.banner-tip.error {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 35%, transparent);
}

/* ── 滚动区 ───────────────────────────────────────────── */
.view {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--m-side-margin) 24px;
  scrollbar-width: none;
}
.view::-webkit-scrollbar {
  display: none;
}

/* ── 区块标题 ─────────────────────────────────────────── */
.section {
  margin: 12px 0 0;
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 8px;
}

.sec-mark {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--c-text-tertiary);
  flex: none;
}
.sec-mark.ending {
  background: var(--c-danger);
}
.sec-mark.upcoming {
  background: var(--c-warn);
}

.sec-title {
  margin: 0;
  font-size: var(--t-section-title-size);
  font-weight: var(--t-section-title-weight);
  color: var(--c-text);
}

.sec-count {
  font-size: 11px;
  color: var(--c-text-tertiary);
  font-variant-numeric: tabular-nums;
  background: var(--c-card);
  border-radius: 999px;
  padding: 0 6px;
}

.sec-rule {
  flex: 1;
  height: 1px;
  background: var(--c-line);
}

.empty {
  font-size: 13px;
  color: var(--c-text-tertiary);
  padding: 12px 0 14px;
  line-height: 1.6;
}

.note {
  font-size: 12px;
  color: var(--c-text-tertiary);
  line-height: 1.55;
  padding: 8px 0 2px;
}

/* ── 事件卡 ───────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--m-card-radius);
  margin-bottom: var(--m-card-gap);
  overflow: hidden;
  transition: background var(--m-motion-fast) ease;
}
.card.multi {
  cursor: pointer;
}
.card.multi:hover {
  background: var(--c-card-alt);
}

.stripe {
  flex: none;
  width: 3px;
  align-self: stretch;
}

.card-body {
  flex: 1;
  min-width: 0;
  padding: var(--m-card-padding-y) var(--m-card-padding-x);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.game-dot {
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

.game {
  font-size: var(--t-game-name-size);
  line-height: var(--t-game-name-lh);
  font-weight: 600;
  color: var(--c-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.badge {
  flex: none;
  font-size: var(--t-badge-size);
  line-height: 1.45;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--c-line);
  color: var(--c-text-secondary);
  white-space: nowrap;
}
.badge.gacha {
  color: var(--c-accent);
  border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
  background: var(--c-accent-soft);
}
.badge.event {
  color: var(--c-ok);
  border-color: color-mix(in srgb, var(--c-ok) 34%, transparent);
  background: color-mix(in srgb, var(--c-ok) 12%, transparent);
}
.badge.count {
  font-variant-numeric: tabular-nums;
  background: var(--c-card-alt);
}

.chev {
  margin-left: auto;
  flex: none;
  color: var(--c-text-tertiary);
  display: inline-flex;
  transition: transform var(--m-motion-fast) ease;
}
.chev svg {
  width: 14px;
  height: 14px;
  display: block;
}
.chev.open {
  transform: rotate(180deg);
}

.card-title {
  margin-top: 3px;
  font-size: var(--t-card-title-size);
  line-height: var(--t-card-title-lh);
  font-weight: var(--t-card-title-weight);
  letter-spacing: var(--t-card-title-tracking, 0);
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-foot {
  margin-top: 5px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.range {
  font-size: var(--t-range-size);
  line-height: var(--t-range-lh, 18px);
  font-weight: var(--t-range-weight, 400);
  color: var(--c-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 倒计时：靠字重与颜色强调，绝不放大字号、绝不用比例数字 */
.remain {
  flex: none;
  font-size: var(--t-remain-size);
  line-height: var(--t-remain-lh);
  font-weight: var(--t-remain-weight);
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 7.2em;
  text-align: right;
}
.remain.near {
  color: var(--c-text);
}
.remain.soon {
  color: var(--c-warn);
}
.remain.urgent {
  color: var(--c-danger);
}

/* 展开后的明细 */
.sublist {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--c-line);
}
.sublist li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--t-range-size);
  line-height: 1.5;
  color: var(--c-text-secondary);
}
.sl-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-kind {
  flex: none;
  color: var(--c-text-tertiary);
  font-size: var(--t-badge-size);
}
.sl-tag {
  flex: none;
  color: var(--c-warn);
  font-size: var(--t-badge-size);
  border: 1px solid color-mix(in srgb, var(--c-warn) 32%, transparent);
  border-radius: 4px;
  padding: 0 4px;
}

/* ── 日程 ─────────────────────────────────────────────── */
.day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 7px;
  position: sticky;
  top: -4px;
  background: var(--c-surface);
  z-index: 2;
}

.day-num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.day-meta {
  font-size: 11px;
  color: var(--c-text-tertiary);
}
.day-when {
  margin-left: auto;
  font-size: 12px;
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}
.day-count {
  font-size: 11px;
  color: var(--c-text-tertiary);
  background: var(--c-card);
  border-radius: 999px;
  padding: 0 6px;
}

.cal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--m-touch-min);
  padding: 6px 10px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: max(8px, calc(var(--m-card-radius) - 4px));
  margin-bottom: 4px;
  font-size: var(--t-range-size);
}
.cal-time {
  flex: none;
  width: 40px;
  color: var(--c-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.cal-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}
.cal-game {
  flex: none;
  max-width: 112px;
  font-size: 11px;
  color: var(--c-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 游戏 ─────────────────────────────────────────────── */
.game-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--m-touch-min);
  padding: 8px 10px 8px 0;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: max(8px, calc(var(--m-card-radius) - 2px));
  margin-bottom: 5px;
  overflow: hidden;
}
.game-bar {
  flex: none;
  width: 3px;
  align-self: stretch;
}
.game-body {
  flex: 1;
  min-width: 0;
}
.game-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.game-name {
  font-size: var(--t-card-title-size);
  line-height: 1.3;
  font-weight: 500;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.state-pill {
  flex: none;
  font-size: var(--t-badge-size);
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--c-line);
  color: var(--c-text-tertiary);
}
.state-pill.ok {
  color: var(--c-ok);
  border-color: color-mix(in srgb, var(--c-ok) 34%, transparent);
  background: color-mix(in srgb, var(--c-ok) 10%, transparent);
}
.state-pill.nomatch {
  color: var(--c-warn);
  border-color: color-mix(in srgb, var(--c-warn) 34%, transparent);
  background: color-mix(in srgb, var(--c-warn) 10%, transparent);
}
.state-pill.down {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 34%, transparent);
  background: color-mix(in srgb, var(--c-danger) 10%, transparent);
}
.game-current {
  margin-top: 2px;
  font-size: var(--t-range-size);
  line-height: var(--t-range-lh, 18px);
  color: var(--c-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-side {
  flex: none;
}
.game-remain {
  font-size: 11px;
  color: var(--c-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ── 数据 ─────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.stat {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--m-card-radius);
  padding: 10px 12px;
}
.stat-n {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.stat-k {
  margin-top: 2px;
  font-size: 11px;
  color: var(--c-text-tertiary);
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: var(--t-range-size);
  border-bottom: 1px solid var(--c-line);
}
.kv:last-child {
  border-bottom: none;
}
.kv-k {
  color: var(--c-text-tertiary);
  flex: none;
}
.kv-v {
  color: var(--c-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fail-item {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-danger);
  padding: 6px 9px;
  background: color-mix(in srgb, var(--c-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-danger) 22%, transparent);
  border-radius: 8px;
  margin-bottom: 4px;
}

.reminder {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 36px;
  font-size: var(--t-range-size);
  padding: 7px 10px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  margin-bottom: 4px;
}
.rem-when {
  flex: none;
  color: var(--c-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rem-text {
  color: var(--c-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 平台切换（数据页里的完整选择器） */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 10px;
}
.plat-btn {
  min-height: var(--m-touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-secondary);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--m-motion-fast) ease, border-color var(--m-motion-fast) ease;
}
.plat-btn small {
  font-size: 9.5px;
  font-weight: 400;
  color: var(--c-text-tertiary);
}
.plat-btn.active {
  color: var(--c-accent);
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
  background: var(--c-accent-soft);
}

.spec-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  font-size: 11.5px;
  line-height: 1.9;
}
.spec-table dt {
  color: var(--c-text-tertiary);
}
.spec-table dd {
  margin: 0;
  color: var(--c-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 安装到桌面等一次性动作 */
.action-btn {
  width: 100%;
  min-height: var(--m-touch-min);
  margin-top: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-accent-soft);
  border: 1px solid color-mix(in srgb, var(--c-accent) 50%, transparent);
  border-radius: max(8px, calc(var(--m-card-radius) - 4px));
  cursor: pointer;
  transition: background var(--m-motion-fast) ease;
}
.action-btn:hover {
  background: color-mix(in srgb, var(--c-accent) 24%, transparent);
}

/* ── 底部导航 ─────────────────────────────────────────── */
.tabbar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: var(--m-tabbar-height);
  margin: 0 var(--m-tabbar-inset);
  border-radius: var(--m-tabbar-radius);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 3;
}

/* 鸿蒙式悬浮胶囊：离开边缘、加圆角、保留 1px 上边线（官方：模糊背板上边缘 1px 分割线） */
.app[data-platform="harmony"] .tabbar {
  margin-bottom: 10px;
  border: 1px solid var(--c-line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* iOS 式：全宽 + 材质模糊（Liquid Glass 的近似） */
.app[data-platform="ios"] .tabbar {
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
}

.tab {
  border: none;
  background: none;
  color: var(--c-text-tertiary);
  font-family: inherit;
  font-size: var(--t-tab-label-size);
  font-weight: 500;
  letter-spacing: 0.2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  position: relative;
  transition: color var(--m-motion-fast) ease;
}
.tab .ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 26px;
}
.tab .ico svg {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  z-index: 1;
}
.tab.active {
  color: var(--c-text);
}
.tab.active .ico {
  color: var(--c-accent);
}

/* Material 3：56×32 的 active indicator（官方尺寸） */
.app[data-platform="material"] .tab.active .ico::before {
  content: "";
  position: absolute;
  inset: -4px auto auto 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 32px;
  border-radius: 999px;
  background: var(--c-accent-soft);
}
.app[data-platform="material"] .tab .ico {
  height: 32px;
}