:root {
  --green: #07c160;
  --green-d: #06ad56;
  --bg: #f2f3f5;
  --card: #ffffff;
  --text: #1f1f1f;
  --muted: #9aa0a6;
  --line: #ebedf0;
  --orange: #ff9d00;
  --blue: #3a8ffe;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 观看视频按钮(投票列表 / 我的投票记录) */
.watch { flex: 0 0 auto; margin-left: 6px; padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--blue); color: var(--blue); background: #fff;
  border-radius: 14px; cursor: pointer; }
.watch:active { background: #eaf2ff; }

/* 视频播放轻量层 */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.lb-box { width: 100%; max-width: 440px; background: #fff; border-radius: 14px;
  overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.lb-head { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.lb-close { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; }
.lb-body { padding: 16px; text-align: center; }
.lb-body video { width: 100%; border-radius: 8px; background: #000; max-height: 70vh; }
.lb-body a.primary { display: inline-block; margin: 6px 0; }
.lb-body .small { font-size: 12px; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.5;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg);
  display: flex; flex-direction: column; }
.topbar { background: var(--green); color: #fff; text-align: center;
  padding: 14px; font-size: 17px; font-weight: 600; position: sticky; top: 0; z-index: 5; }
#view { flex: 1; padding: 12px; padding-bottom: 76px; }
#tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; display: flex; background: #fff;
  border-top: 1px solid var(--line); }
#tabs button { flex: 1; border: 0; background: none; padding: 8px 0 10px;
  font-size: 12px; color: var(--muted); display: flex; flex-direction: column;
  align-items: center; gap: 2px; }
#tabs button span { font-size: 20px; }
#tabs button.active { color: var(--green); }

.card { background: var(--card); border-radius: 12px; padding: 14px;
  margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.center { text-align: center; padding: 40px 14px; color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; }
.loading { text-align: center; color: var(--muted); padding: 40px; }

.banner { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  font-weight: 600; color: #fff; }
.banner.submitting { background: var(--green); }
.banner.buffer { background: var(--orange); }
.banner.voting { background: var(--blue); }
.banner.closed, .banner.weekend { background: #9aa0a6; }

.vid { display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border-bottom: 1px solid var(--line); }
.vid:last-child { border-bottom: 0; }
.vid input { width: 18px; height: 18px; accent-color: var(--green); }
.vid .code { background: #e8f8ee; color: var(--green); border-radius: 6px;
  padding: 2px 8px; font-weight: 600; font-size: 13px; }
.vid .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid .votes { color: var(--muted); font-size: 13px; }
.vid.checked { background: #f4fbf6; }

.primary { background: var(--green); color: #fff; border: 0; border-radius: 10px;
  padding: 12px; width: 100%; font-size: 16px; font-weight: 600; margin-top: 4px; }
.primary:active { background: var(--green-d); }
.ghost { background: #f2f3f5; color: var(--text); border: 0; border-radius: 10px;
  padding: 12px; font-size: 15px; }
.btn-file { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-row { display: flex; gap: 10px; }
.datebar { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.datebar select { width: auto; min-width: 220px; margin: 0; }

input[type=text], input[type=number], input[type=date], textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; font-size: 15px; margin: 6px 0; background: #fff; }
textarea { min-height: 120px; font-family: monospace; font-size: 12px; }
.vid input[type=number] { width: 92px; height: auto; }
.mini { width: auto; padding: 6px 12px; font-size: 13px; margin: 0; }
label.field { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; }

.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.block { margin-top: 10px; }
.table { margin: 6px 0; }
.row2 { display: flex; justify-content: space-between; padding: 8px 4px;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.row2:last-child { border-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
th { background: #f7f8fa; }

.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 14px; width: 86%; max-width: 340px; padding: 20px; }
.modal h3 { margin: 0 0 4px; }
.modal-actions { display: flex; gap: 10px; margin-top: 14px; }

.toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(0,0,0,.8); color: #fff; padding: 10px 18px; border-radius: 8px;
  z-index: 99; font-size: 14px; }
.hidden { display: none !important; }

.tag { display: inline-block; background: #e8f8ee; color: var(--green);
  border-radius: 6px; padding: 2px 8px; font-size: 12px; margin: 2px; }
.tag.rank1 { background: #fff4e0; color: #d48806; }
.tag.rank2 { background: #f0f4ff; color: #3a8ffe; }
.tag.rank3 { background: #fdeeee; color: #e85d5d; }

/* ===== 备案信息页脚（合规展示，避让固定底栏，不遮挡投票按钮）===== */
.beian-bar{
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 12px 92px;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}
.beian-bar a{ color: var(--muted); text-decoration: none; }
.beian-sep{ opacity: .5; }

/* ===== 让页脚恰好落在首屏底部（预留 .beian-bar 高度）===== */
#app{ min-height: calc(100vh - 140px); }

/* ===== iPhone 底部安全区适配（仅 iOS 生效；Android/桌面 env()=0，效果不变）===== */
@supports (padding: env(safe-area-inset-bottom)){
  #tabs{ padding-bottom: env(safe-area-inset-bottom); }
  #view{ padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .beian-bar{ padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}