/* ==========================================================================
   入场检票 · 面板样式（后台「🎫 票务」和检票口岗位页面共用）
   ========================================================================== */

.ci-mask{
  position: fixed; inset: 0; z-index: 95;
  display: none; align-items: center; justify-content: center; padding: 18px;
  background: rgba(6,4,16,.82); backdrop-filter: blur(8px);
}
.ci-mask.show{ display: flex; }

.ci-box{
  width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(26,21,58,.98), rgba(14,11,32,.99));
  border: 1px solid rgba(158,203,255,.22); border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7); color: var(--text);
  animation: ciIn .24s cubic-bezier(.2,.9,.3,1.15);
  overflow: hidden;
}
@keyframes ciIn{ from{ transform: translateY(14px) scale(.97); opacity: 0 } to{ transform: none; opacity: 1 } }

.ci-head{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px; font-size: 16px; font-weight: 700; letter-spacing: 1px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ci-head .sp{ flex: 1; }
.ci-head button{
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: rgba(158,203,255,.08); border: 1px solid rgba(158,203,255,.22);
  color: var(--text); font-size: 14px; line-height: 1;
}
.ci-head button:hover{ background: rgba(158,203,255,.2); }

.ci-body{ padding: 14px 16px 16px; overflow-y: auto; }

.ci-body input{
  width: 100%; box-sizing: border-box;
  padding: 14px 16px; border-radius: 13px;
  border: 1px solid rgba(158,203,255,.28); background: rgba(8,7,20,.7);
  color: #fff; font-size: 20px; letter-spacing: 2px; font-family: inherit; outline: none;
}
.ci-body input:focus{ border-color: var(--ice); box-shadow: 0 0 0 3px rgba(158,203,255,.16); }

/* ---- 结果条：一眼就能看清 ---- */
.ci-result{
  margin-top: 12px; padding: 16px 18px; border-radius: 15px; text-align: center;
  background: rgba(158,203,255,.06); border: 1px solid rgba(158,203,255,.14);
  transition: background .2s ease, border-color .2s ease;
}
.ci-result .big{ font-size: 27px; font-weight: 900; letter-spacing: 4px; }
.ci-result .serial{ margin-top: 5px; font-size: 17px; letter-spacing: 2px; opacity: .95; }
.ci-result .sub{ margin-top: 4px; font-size: 12.5px; color: var(--muted, #9d97bb); }

.ci-result.is-ok{ background: rgba(46,160,90,.18); border-color: rgba(110,230,160,.55); }
.ci-result.is-ok .big{ color: #7ee2a8; }
.ci-result.is-used{ background: rgba(210,160,40,.16); border-color: rgba(255,205,110,.5); }
.ci-result.is-used .big{ color: #ffd98a; }
.ci-result.is-void, .ci-result.is-unknown{ background: rgba(200,50,60,.16); border-color: rgba(255,120,130,.5); }
.ci-result.is-void .big, .ci-result.is-unknown .big{ color: #ff9a9a; }

/* ---- 今日计数 ---- */
.ci-stats{ display: flex; gap: 8px; margin-top: 12px; }
.ci-stats > div{
  flex: 1; text-align: center; padding: 9px 4px; border-radius: 12px;
  background: rgba(158,203,255,.06); border: 1px solid rgba(158,203,255,.12);
}
.ci-stats b{ display: block; font-size: 22px; line-height: 1.2; }
.ci-stats span{ font-size: 11.5px; color: var(--muted, #9d97bb); letter-spacing: 1px; }

/* ---- 最近扫的 ---- */
.ci-recent{ margin-top: 14px; font-size: 13px; }
.ci-recent .ci-row{
  display: flex; align-items: center; gap: 10px; padding: 6px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ci-recent .ci-row .s{ flex: 0 0 88px; font-family: ui-monospace, Consolas, monospace; }
.ci-recent .ci-row .r{ flex: 1; }
.ci-recent .ci-row .t{ color: var(--muted, #9d97bb); font-size: 11.5px; }
.ci-recent .ci-row.is-ok .r{ color: #7ee2a8; }
.ci-recent .ci-row.is-used .r{ color: #ffd98a; }
.ci-recent .ci-row.is-void .r, .ci-recent .ci-row.is-unknown .r{ color: #ff9a9a; }

/* ---- 后台票务页签 ---- */
.tk-list{ font-size: 13.5px; }
.tk-row{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.tk-row .serial{ flex: 0 0 84px; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.tk-row .meta{ flex: 1 1 160px; color: var(--muted, #9d97bb); font-size: 12px; }
.tk-row .btn{ padding: 5px 12px !important; font-size: 12px !important; flex: 0 0 auto; }
.tk-badge{ display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.tk-badge.issued{ background: rgba(158,203,255,.16); color: #cfe4ff; }
.tk-badge.used{ background: rgba(70,190,120,.2); color: #7ee2a8; }
.tk-badge.void{ background: rgba(200,60,70,.2); color: #ff9a9a; }

.tk-batch-row{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.tk-batch-row .name{ flex: 1 1 150px; font-weight: 700; }
.tk-batch-row .nums{ color: var(--muted, #9d97bb); font-size: 12.5px; }
.tk-batch-row .btn{ padding: 5px 12px !important; font-size: 12px !important; }

@media (prefers-reduced-motion: reduce){ .ci-box{ animation: none; } }