/* ============================================================
   献丑了 · 数据看板
   视觉规范来自活动主 K：纯白底 + 超粗黑体 + 荧光绿/紫 + 手绘粗描边
   色值取自主 K 实图：#FFFFFF / #36D52D / #000000 / #7F39B1
   ============================================================ */

:root {
  /* —— 主 K 色板 —— */
  --bg: #FFFFFF;
  --ink: #000000;
  --green: #36D52D;
  --purple: #7F39B1;
  --green-soft: #DEFBD3;
  --purple-soft: #EEDCF9;
  --gray: #F1F1EF;

  /* —— 手绘贴纸规范 —— */
  --bw: 3px;                      /* 主描边 */
  --bw-thin: 2px;                 /* 次描边 */
  --shadow: 4px 4px 0 var(--ink); /* 硬投影，无模糊 */
  --shadow-lg: 6px 6px 0 var(--ink);

  --text: var(--ink);
  --text-dim: #6B6B6B;

  --up: var(--green);
  --down: var(--purple);

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 超粗字：系统中文最多到 Semibold，用 text-stroke 补足主 K 那种“黑体压扁”的分量 */
.heavy, .kv__cn, .kv__sub, .kv__date, .kv__en,
.hero__tag, .hero-card__value, .hero-rate__value,
.kpi-card__value, .mini-card__value,
.sec-title, .live-tag, .statusbar__text {
  font-weight: 900;
  -webkit-text-stroke: 0.5px currentColor;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px calc(env(safe-area-inset-bottom, 0px) + 28px);
}

/* ============ KV 头部 ============ */
.kv { margin-bottom: 14px; }
.kv__caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kv__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.kv__cn {
  font-size: 44px;
  line-height: .92;
  letter-spacing: -2px;
  margin: 0;
  -webkit-text-stroke: 1.2px currentColor;
}
.kv__en {
  font-size: 13px;
  line-height: 1.06;
  letter-spacing: -.2px;
  margin-top: 4px;
}
.kv__right { padding-top: 2px; }
.kv__sub {
  font-size: 15px;
  line-height: 1.18;
  letter-spacing: -.3px;
}
.kv__date {
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* ============ 运行状态 ============ */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--gray);
  border: var(--bw-thin) solid var(--ink);
  border-radius: 999px;
  padding: 4px 5px 4px 12px;
  margin-bottom: 16px;
}
.statusbar__left { display: flex; align-items: center; gap: 7px; min-width: 0; }
.statusbar__text {
  font-size: 11px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusbar__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.statusbar__time {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.statusbar.is-updated { background: var(--green-soft); }

.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--ink);
  flex-shrink: 0;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(54,213,45,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(54,213,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(54,213,45,0); }
}

/* 刷新按钮：图标用「绝对定位 + 负 margin」精确居中。
   坑：<button> 自带 UA 默认内边距（Chrome/Safari 为 1px 6px），
   之前只设了 width/height/border 没重置 padding，导致图标被 6px 左内边距
   整体挤向右侧（实测左留白 8px / 右留白 2px）。故此处必须 padding:0
   并关闭 appearance，居中不再依赖 flex/grid/基线，各引擎表现一致。 */
.refresh-btn {
  position: relative;
  width: 26px; height: 26px;
  padding: 0; margin: 0;
  appearance: none; -webkit-appearance: none;
  border: var(--bw-thin) solid var(--ink);
  border-radius: 50%; background: #fff; color: var(--ink);
  font-size: 0; line-height: 0;
  flex: 0 0 auto; align-self: center;   /* 相对状态栏上下垂直居中 */
  cursor: pointer;
  transition: transform .12s, background .2s;
}
.refresh-btn__ico {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;                /* 16/2，精确压到圆心 */
  display: block; pointer-events: none;
}
.refresh-btn svg { display: block; width: 16px; height: 16px; }
.refresh-btn:active { transform: scale(.88); background: var(--green); }
.refresh-btn.spinning svg { animation: spin .8s linear; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* 错误条 */
.error-bar {
  background: var(--purple);
  color: #fff;
  border: var(--bw) solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ============ 今日概览（绿色主块 + 放射线） ============ */
/* 外层留出 padding 给放射线，射线不会压到相邻卡片 */
.hero-wrap { position: relative; padding: 40px 34px 42px; margin-bottom: 4px; }
.rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero {
  position: relative;
  z-index: 1;
  background: var(--green);
  border: var(--bw) solid var(--ink);
  /* 手绘不规则圆角 */
  border-radius: 28px 34px 26px 36px / 34px 26px 36px 28px;
  box-shadow: var(--shadow-lg);
  padding: 18px 14px 14px;
}
.hero__tag {
  position: absolute;
  top: -13px; left: 16px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 3px 12px 4px;
  border-radius: 999px;
}
.hero__date {
  position: absolute;
  top: -13px; right: 16px;
  background: #fff;
  border: var(--bw-thin) solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.hero-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hero-card {
  background: #fff;
  border: var(--bw-thin) solid var(--ink);
  border-radius: 14px 18px 13px 19px / 17px 13px 19px 14px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 9px 6px 7px;
  text-align: center;
  position: relative;
  transition: box-shadow .18s, transform .18s;
}
.hero-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text-dim);
  white-space: nowrap;
}
.hero-card__value {
  font-size: 24px;
  line-height: 1.15;
  margin-top: 3px;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.hero-rate {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 13px; padding-top: 10px;
  border-top: var(--bw-thin) dashed var(--ink);
}
.hero-rate__label { font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.hero-rate__value {
  font-size: 26px; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: var(--bw-thin) solid var(--ink);
  border-radius: 999px;
  padding: 0 12px 2px;
}

/* 增减徽标（贴纸胶囊） */
.delta {
  height: 16px;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s, transform .25s;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delta.show { opacity: 1; transform: scale(1); }
.delta.is-up { color: var(--ink); }
.delta.is-down { color: var(--purple); }

/* 变化高亮：贴纸弹跳 + 撞色描边环（白卡/绿块上都醒目） */
.is-changed { animation: pop .95s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop {
  0%   { transform: none; box-shadow: 3px 3px 0 var(--ink); }
  18%  { transform: translate(-4px,-4px) rotate(-1.6deg) scale(1.03);
         box-shadow: 7px 7px 0 var(--ink), 0 0 0 4px var(--green); }
  42%  { transform: translate(0,0) rotate(1.2deg) scale(1.01);
         box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px var(--purple); }
  70%  { transform: translate(-1px,-1px) rotate(-.4deg);
         box-shadow: 4px 4px 0 var(--ink), 0 0 0 2px var(--green); }
  100% { transform: none; box-shadow: 3px 3px 0 var(--ink); }
}

/* ============ 区块标题 ============ */
.sec-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: -.2px;
}
.sec-title__note {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--ink);
  background: var(--green);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 1px 7px;
  -webkit-text-stroke: 0;
}
.spark { width: 17px; height: 17px; flex-shrink: 0; }

.live-tag {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #fff;
  background: var(--purple);
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  padding: 1px 6px 2px;
  animation: blink 1.4s infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ============ 最新预约 LIVE 流 ============ */
.feed-card,
.search-card,
.chart-card,
.kpi-card,
.mini-card {
  background: #fff;
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
}
.feed-card {
  border-radius: 18px 22px 17px 23px / 21px 17px 23px 18px;
  padding: 14px 14px 8px;
  margin-bottom: 18px;
}
.feed { list-style: none; margin: 0; padding: 0; max-height: 236px; overflow-y: auto; }
.feed::-webkit-scrollbar { width: 0; }
.feed-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  border-bottom: var(--bw-thin) dashed #C9C9C9;
}
.feed-item:last-child { border-bottom: none; }
.feed-item__main { display: flex; flex-direction: column; min-width: 0; }
.feed-item__name { font-size: 13px; font-weight: 800; letter-spacing: .2px; }
.feed-item__time { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.feed-item__sub { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.feed-item__status {
  font-size: 10px;
  font-weight: 800;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.feed-item__at { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.status-warning { background: var(--gray);      color: var(--ink); }
.status-success { background: var(--green);     color: var(--ink); }
.status-danger  { background: var(--purple);    color: #fff; }
.status-info    { background: #fff;             color: var(--ink); }

/* 新条目滑入 */
.feed-item--new { animation: slidein .5s cubic-bezier(.34,1.4,.64,1); background: var(--green-soft); }

/* ============ 预约查询（搜索） ============ */
.search-card {
  border-radius: 18px 22px 17px 23px / 21px 17px 23px 18px;
  padding: 14px;
  margin-bottom: 18px;
}
.search-bar { display: flex; gap: 8px; }

/* 输入框与查询按钮同为 40px 高、2px 黑描边，靠 line-height 垂直居中（不依赖 flex，规避 UA 默认样式差异） */
.search-input {
  flex: 1 1 auto; min-width: 0;
  height: 40px;
  padding: 0 12px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  line-height: 36px;
  color: var(--ink); background: #fff;
  border: var(--bw-thin) solid var(--ink);
  border-radius: 12px 15px 11px 16px / 14px 11px 16px 12px;
  outline: none; appearance: none; -webkit-appearance: none;
}
.search-input::placeholder { color: #9C9C9C; font-weight: 600; }
.search-input:focus { box-shadow: 3px 3px 0 var(--ink); }
/* 清掉 iOS/Safari 给 type=search 自带的小图标与内边距 */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-btn {
  flex: 0 0 auto;
  height: 40px; padding: 0 14px;
  font-family: inherit; font-size: 13px; font-weight: 900;
  line-height: 36px;
  color: var(--ink); background: var(--green);
  border: var(--bw-thin) solid var(--ink);
  border-radius: 12px 15px 11px 16px / 14px 11px 16px 12px;
  box-shadow: 3px 3px 0 var(--ink);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .2s;
}
.search-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.search-btn[disabled] { background: var(--gray); color: var(--text-dim); cursor: default; }
/* 重置：次级按钮，白底黑边，不与「查询」抢视觉 */
.search-btn--ghost { background: #fff; }
.search-btn--ghost:active { background: var(--gray); }

/* 结果计数 / 提示 */
.search-meta {
  margin-top: 10px;
  font-size: 11px; font-weight: 800; color: var(--text-dim);
  letter-spacing: .2px;
}
.search-meta--warn { color: var(--purple); }
.search-meta--err { color: var(--purple); }

/* 结果列表 */
.res-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 372px; overflow-y: auto; }
.res-list:empty { margin-top: 0; }
.res-list::-webkit-scrollbar { width: 0; }
.res-item {
  border: var(--bw-thin) solid var(--ink);
  border-radius: 14px 18px 13px 19px / 17px 13px 19px 14px;
  padding: 10px 11px;
  margin-bottom: 9px;
  animation: pop .4s cubic-bezier(.34,1.4,.64,1);
}
.res-item--empty {
  border-style: dashed; border-color: #C9C9C9;
  color: var(--text-dim); font-size: 12px; font-weight: 700;
  text-align: center; padding: 18px 10px; animation: none;
}
.res-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.res-item__name {
  font-size: 14px; font-weight: 900; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 手机号：默认打码，点一下展开完整号码 */
.res-item__mobile {
  flex: 0 0 auto;
  font-family: inherit; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--gray);
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 2px 9px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  transition: background .2s;
}
.res-item__mobile.is-open { background: var(--green-soft); }
.res-item__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.res-tag {
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}
.res-tag--date { background: var(--green-soft); }
.res-tag--time { background: var(--purple-soft); }
/* 状态标签复用全局 .status-* 配色，但 .res-tag 在其后定义，需提高优先级才不会被白底覆盖 */
.res-tag.status-warning { background: var(--gray);   color: var(--ink); }
.res-tag.status-success { background: var(--green);  color: var(--ink); }
.res-tag.status-danger  { background: var(--purple); color: #fff; }
.res-tag.status-info    { background: #fff;          color: var(--ink); }
.res-item__at {
  margin-left: auto;
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* 加载更多 */
.search-more {
  display: block; width: 100%;
  margin-top: 10px; height: 36px;
  font-family: inherit; font-size: 12px; font-weight: 900;
  line-height: 32px;
  color: var(--ink); background: #fff;
  border: var(--bw-thin) solid var(--ink);
  border-radius: 12px 15px 11px 16px / 14px 11px 16px 12px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.search-more:active { background: var(--green); }
/* 坑：.search-more 设了 display:block，会盖过 UA 的 [hidden]{display:none}（类选择器优先级更高），
   导致 hidden 属性失效、按钮一直显示。必须显式补这条。 */
.search-more[hidden] { display: none; }
@keyframes slidein {
  0%   { opacity: 0; transform: translateY(-12px) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ============ 图表卡片 ============ */
.chart-card {
  border-radius: 16px 20px 15px 21px / 19px 15px 21px 16px;
  padding: 14px;
  margin-bottom: 18px;
}
.chart { width: 100%; height: 224px; }
.chart--donut { height: 205px; }

/* ============ 总数据汇总 ============ */
/* 位于「最新预约」与图表之间，上下都要留出与其他模块一致的 18px 节奏 */
.summary { margin: 0 0 18px; }
.sec-title--plain { font-size: 16px; letter-spacing: -.3px; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.kpi-card {
  border-radius: 14px 18px 13px 19px / 17px 13px 19px 14px;
  padding: 12px 13px;
  transition: box-shadow .18s, transform .18s;
}
.kpi-card--purple { background: var(--purple-soft); }
.kpi-card__label { font-size: 11px; font-weight: 800; letter-spacing: .2px; color: var(--text-dim); }
.kpi-card--purple .kpi-card__label { color: var(--purple); }
.kpi-card__value { font-size: 26px; line-height: 1.1; margin-top: 4px; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.kpi-card__unit { font-size: 10px; font-weight: 700; color: var(--text-dim); margin-top: 1px; }

/* 预约率 / 核销率 / 已预约票数 / 剩余票数 已从汇总区移除（对应 .rate-* 样式一并删除） */

.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mini-card { border-radius: 12px 16px 11px 17px / 15px 11px 17px 12px; padding: 10px 12px; transition: box-shadow .18s, transform .18s; }
.mini-card__label { font-size: 11px; font-weight: 800; letter-spacing: .2px; color: var(--text-dim); }
.mini-card__value { font-size: 19px; line-height: 1.15; margin-top: 2px; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }

/* ============ 底部 ============ */
.footer {
  margin-top: 20px;
  padding-top: 12px;
  border-top: var(--bw) solid var(--ink);
  text-align: center;
}
.footer__org { font-size: 10px; font-weight: 800; letter-spacing: .2px; }
.footer__note { font-size: 10px; font-weight: 600; color: var(--text-dim); margin-top: 3px; }

/* 小屏微调 */
@media (max-width: 360px) {
  .kv__cn { font-size: 38px; }
  .kv__date { font-size: 18px; }
  .hero-card__value { font-size: 21px; }
  .kpi-card__value { font-size: 23px; }
}

/* 尊重系统“减弱动态效果” */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}