/* 交易择时 App —— 应验打勾 + 战绩面板样式（非侵入式覆盖层）。
   设计原则:✓/✗ 做成自带底色的独立 chip,与币圈「红涨绿跌」正交,不染卡片本身。
   两套主题通用(深色币圈 / 暖金黄金),用半透明深底 + 玄机金描边自适应。 */

/* 原生手感:允许单指平移滚动,但禁双指捏合缩放 + 双击缩放(配合 verify.js 的手势拦截) */
html, body { touch-action: pan-x pan-y; }

:root{
  --tv-hit:#2f9e5a; --tv-hit-bg:rgba(47,158,90,.18);
  --tv-miss:#d65a5a; --tv-miss-bg:rgba(214,90,90,.16);
  --tv-wait:#8a93a8; --tv-wait-bg:rgba(138,147,168,.14);
  --tv-gold:#c9a86a; --tv-gold2:#f0d678;
  --tv-ink:#eef1f8; --tv-dim:#9aa3ba;
  --tv-panel:#0e1426; --tv-panel2:#161f38;
}

/* ============ 卡片上的应验徽章（角标 chip） ============ */
.tv-card{position:relative}                 /* 确保角标定位锚点;已 relative 的卡片不受影响 */
.tv-badge{
  position:absolute; z-index:6; top:6px; right:6px;
  min-width:18px; height:18px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  font:700 11px/1 -apple-system,"PingFang SC",sans-serif;
  border-radius:9px; pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}
.tv-badge.hit { color:#bdf0d0; background:var(--tv-hit-bg);  border:1px solid var(--tv-hit) }
.tv-badge.miss{ color:#f6c5c5; background:var(--tv-miss-bg); border:1px solid var(--tv-miss) }
.tv-badge.wait{ color:#c7cde0; background:var(--tv-wait-bg); border:1px dashed var(--tv-wait);
  font-weight:600; font-size:9px; letter-spacing:.02em }
/* 黄金季节性:命中=绿,未中=红,但 glyph 用 📈📉 表达实际涨跌方向 */
.tv-card.tv-marked.hit  { box-shadow:inset 0 0 0 1.5px var(--tv-hit) }
.tv-card.tv-marked.miss { box-shadow:inset 0 0 0 1.5px var(--tv-miss) }

/* 管理模式:卡片右下角「记」小钮 */
.tv-rec{
  position:absolute; z-index:7; bottom:5px; right:5px;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; user-select:none;
  background:rgba(201,168,106,.16); color:var(--tv-gold2);
  border:1px solid var(--tv-gold); transition:.14s;
}
.tv-rec:hover{ background:var(--tv-gold); color:#1a1208; transform:scale(1.08) }

/* ============ 打勾 popover ============ */
.tv-pop-mask{position:fixed; inset:0; z-index:9998; display:none; background:rgba(4,7,14,.55)}
.tv-pop-mask.show{display:block}
.tv-pop{
  position:fixed; z-index:9999; display:none;
  width:min(320px,calc(100vw - 28px));
  background:linear-gradient(180deg,var(--tv-panel2),var(--tv-panel));
  border:1px solid var(--tv-gold); border-radius:15px; padding:16px 16px 14px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  font-family:-apple-system,"PingFang SC","Noto Sans SC",sans-serif; color:var(--tv-ink);
}
.tv-pop.show{display:block}
.tv-pop-eyebrow{font-size:10px; letter-spacing:.16em; color:var(--tv-gold); margin-bottom:4px}
.tv-pop-title{font-size:14.5px; font-weight:700; line-height:1.4; margin-bottom:3px}
.tv-pop-sub{font-size:11.5px; color:var(--tv-dim); line-height:1.5; margin-bottom:13px}
.tv-pop-states{display:flex; gap:7px; margin-bottom:11px}
.tv-st{
  flex:1; padding:9px 4px; border-radius:10px; cursor:pointer; text-align:center;
  font:600 12.5px/1.2 inherit; border:1px solid var(--tv-line,#2a3450);
  background:rgba(255,255,255,.03); color:var(--tv-ink); transition:.14s;
}
.tv-st small{display:block; font-size:9.5px; color:var(--tv-dim); margin-top:3px; font-weight:400}
.tv-st:hover{border-color:var(--tv-gold)}
.tv-st.sel.up,  .tv-st.sel.hit { background:var(--tv-hit-bg);  border-color:var(--tv-hit);  color:#bdf0d0 }
.tv-st.sel.down,.tv-st.sel.miss{ background:var(--tv-miss-bg); border-color:var(--tv-miss); color:#f6c5c5 }
.tv-st.sel.clear{ background:var(--tv-wait-bg); border-color:var(--tv-wait); color:#c7cde0 }
.tv-note{
  width:100%; box-sizing:border-box; resize:none; min-height:46px;
  background:rgba(255,255,255,.04); border:1px solid var(--tv-line,#2a3450);
  border-radius:9px; padding:8px 10px; color:var(--tv-ink);
  font:13px/1.5 inherit; margin-bottom:11px;
}
.tv-note::placeholder{color:var(--tv-dim)}
.tv-pop-foot{display:flex; gap:9px; align-items:center}
.tv-save{
  flex:1; padding:9px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,var(--tv-gold2),var(--tv-gold)); color:#1a1208;
  font:700 13px/1 inherit;
}
.tv-save:active{opacity:.85}
.tv-cancel{padding:9px 13px; border:1px solid var(--tv-line,#2a3450); border-radius:10px;
  background:transparent; color:var(--tv-dim); cursor:pointer; font:600 13px/1 inherit}
.tv-toast{
  position:fixed; left:50%; bottom:74px; transform:translateX(-50%) translateY(10px);
  z-index:10000; padding:9px 16px; border-radius:22px; opacity:0; pointer-events:none;
  background:rgba(20,28,48,.95); border:1px solid var(--tv-gold); color:var(--tv-gold2);
  font:600 12.5px/1 -apple-system,"PingFang SC",sans-serif; transition:.25s;
}
.tv-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ============ 外壳顶部战绩条 ============ */
.tv-scoreboard{
  flex:0 0 auto;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(201,168,106,.10), transparent 60%),
    linear-gradient(180deg,#11182c,#0c1120);
  border-bottom:1px solid #23304e;
  padding:11px 15px 12px;
  font-family:-apple-system,"PingFang SC","Noto Sans SC",sans-serif;
  color:var(--tv-ink); position:relative; overflow:hidden;
}
.tv-scoreboard::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--tv-gold),transparent);opacity:.5}
.tv-sb-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.tv-sb-eyebrow{font-size:10px; letter-spacing:.22em; color:var(--tv-gold);
  display:flex; align-items:center; gap:6px}
.tv-sb-since{font-size:9.5px; color:var(--tv-dim); letter-spacing:.04em}
.tv-sb-main{display:flex; align-items:flex-end; gap:12px; margin:5px 0 9px}
.tv-sb-pct{font:800 33px/1 "Georgia",serif; color:var(--tv-gold2);
  letter-spacing:.01em; font-variant-numeric:tabular-nums}
.tv-sb-pct .u{font-size:16px; margin-left:1px; color:var(--tv-gold)}
.tv-sb-pct.empty{font-size:20px; color:var(--tv-dim)}
.tv-sb-meta{font-size:11px; color:var(--tv-dim); line-height:1.45; padding-bottom:3px}
.tv-sb-meta b{color:var(--tv-ink); font-weight:700}
.tv-sb-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.tv-chip{
  background:rgba(255,255,255,.035); border:1px solid #23304e; border-radius:9px;
  padding:7px 5px 6px; text-align:center; min-width:0;
}
.tv-chip .v{font:800 15px/1 "Georgia",serif; color:var(--tv-ink); font-variant-numeric:tabular-nums}
.tv-chip .v.empty{font-size:12px; color:var(--tv-dim); font-weight:600; font-family:inherit}
.tv-chip .l{font-size:9.5px; color:var(--tv-dim); margin-top:3px; letter-spacing:.02em; white-space:nowrap}
.tv-chip .n{font-size:8.5px; color:var(--tv-wait); margin-top:1px}
@media(max-width:360px){
  .tv-sb-pct{font-size:28px} .tv-chip .v{font-size:13px} .tv-chip .l{font-size:9px}
}
/* 管理模式角标:让 Ethan 一眼知道自己处于可写状态 */
.tv-admin-flag{font-size:9px; color:#1a1208; background:var(--tv-gold2);
  padding:1px 6px; border-radius:8px; letter-spacing:.05em; font-weight:700}

/* ============ 日历格子布局修复(2026-06-17) ============ */
/* 病灶:日期数字 .dn 居中置顶,而徽章绝对定位在右上角,窄屏(~46px 格)二者
   横向重叠 → 绿 ✓ 盖住日期。修复原则:日期数字优先级最高,钉死左上角永远可见;
   ✓/✗ 压成右上角小角标(对角分居不重叠);「待·未到」窄屏沉到底部整条。
   全部徽章仍 position:absolute,不影响格子高度 → 打勾/未打勾格子等高。 */

/* 日期数字:钉死左上角,始终清晰可见,任何徽章不得遮挡 */
.grid .cell .dn{ align-self:flex-start; margin-left:1px; position:relative; z-index:7 }

/* 命中/未中徽章:右上角紧凑小角标,与左上角日期分居两角 */
.grid .cell .tv-badge{ top:3px; right:3px; min-width:16px; height:16px;
  padding:0 3px; font-size:10px; border-radius:8px }
.grid .cell .tv-badge.wait{ height:auto; padding:1px 5px; font-size:9px }

/* 窄屏(手机):lab 已隐藏,把「待·未到」整条沉到格子底部,彻底让开顶部日期行;
   ✓/✗ 再压小一档,确保 1-2 位日期数字与角标各占一角、绝不重叠 */
@media(max-width:430px){
  .grid .cell .tv-badge{ top:2px; right:2px; min-width:15px; height:15px;
    padding:0 2px; font-size:9.5px }
  .grid .cell .tv-badge.wait{
    top:auto; bottom:2px; left:2px; right:2px; min-width:0; height:auto;
    padding:2px 0; border-radius:6px; justify-content:center;
    font-size:8px; letter-spacing:.03em }
}

/* ============ 当前所处周期高亮:今天 / 本月 / 今年(2026-06-17) ============ */
/* 由 verify.js 给"现在"那一格(日级=今天 / 月级=本月 / 年级=今年)加 .tv-now。
   表现:一闪一闪的金色光环,一眼定位现在在哪个阶段。
   刻意只用 box-shadow 脉冲描边——不碰 ::before/::after(各视图已用于色条与⚠警示)、
   不改卡片底色/边框语义、金色与红涨绿跌正交、box-shadow 不受卡片 overflow:hidden 裁剪、
   且会盖过 crypto 原有静态 .cell.now 的 1px 金边,让它真正"亮起来"。 */
.tv-now{ position:relative; z-index:4;
  animation:tvNowPulse 1.5s ease-in-out infinite }
@keyframes tvNowPulse{
  0%,100%{ box-shadow:0 0 0 1.5px rgba(240,214,120,.50), 0 0 5px 0 rgba(240,214,120,.25) }
  50%    { box-shadow:0 0 0 2px  rgba(240,214,120,1),   0 0 13px 3px rgba(240,214,120,.70) }
}
/* 关怀:系统开启「减少动态效果」时不闪,改用恒亮金环 */
@media (prefers-reduced-motion: reduce){
  .tv-now{ animation:none;
    box-shadow:0 0 0 2px var(--tv-gold2), 0 0 10px 2px rgba(240,214,120,.6) }
}