/* Kiosk screen beside the coffee machine */
body.kiosk { overflow: hidden; user-select: none; -webkit-user-select: none; }

.k-grid {
  height: 100vh; height: 100dvh; padding: 16px; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head head head"
    "cam today today"
    "cam week month"
    "cam recent recent"
    "cam hours hours";
}
.k-head { grid-area: head; display: flex; align-items: center; gap: 18px; padding: 12px 18px; }
.k-cam { grid-area: cam; }
.k-today { grid-area: today; }
.k-week { grid-area: week; }
.k-month { grid-area: month; }
.k-recent { grid-area: recent; overflow: hidden; }
.k-hours { grid-area: hours; }

/* header */
.k-logo-wrap { background: #fff; border-radius: 14px; padding: 6px 10px; flex: none; }
.k-logo { height: 40px; width: auto; }
.k-title h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.k-title p { margin: 0; color: var(--ink-3); font-size: 14px; }
.k-clock { margin-left: auto; text-align: right; }
.k-clock #kTime { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.k-clock #kDate { font-size: 13px; }

/* camera */
.k-cam { padding: 0; overflow: hidden; background: #050B10; min-height: 300px; }
.k-cam video, .k-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-cam video { object-fit: cover; transform: scaleX(-1); }
.k-guide {
  position: absolute; left: 50%; top: 46%; width: min(42%, 340px); aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, .45); box-shadow: 0 0 0 9999px rgba(3, 8, 12, .28);
  transition: opacity .3s, border-color .3s;
}
.k-cam.face .k-guide { opacity: 0; }
.k-status {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 99px;
  background: rgba(8, 16, 22, .78); backdrop-filter: blur(8px); color: #EAF4FA;
  font-size: 19px; font-weight: 600; white-space: nowrap; max-width: calc(100% - 32px);
  border: 1px solid rgba(255, 255, 255, .1); transition: background .2s;
}
.k-status #statusText { overflow: hidden; text-overflow: ellipsis; }
.k-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #8AA0B2; flex: none; }
.k-status.scan .dot { background: var(--brand); animation: pulse 1s infinite; }
.k-status.warn .dot { background: #FBBF24; }
.k-status.bad .dot { background: #F87171; }
@keyframes pulse { 50% { opacity: .35; } }

.k-camerr {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px;
  padding: 30px; color: #EAF4FA; font-size: 18px;
}
.k-camerr svg { width: 48px; height: 48px; margin: 0 auto; color: #FBBF24; }

/* result overlay */
.k-result {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at 50% 35%, rgba(41, 170, 225, .35), rgba(5, 11, 16, .92) 70%);
  backdrop-filter: blur(6px); animation: pop-in .25s ease;
}
.k-result.already { background: radial-gradient(circle at 50% 35%, rgba(251, 191, 36, .28), rgba(5, 11, 16, .92) 70%); }
.k-result.limit { background: radial-gradient(circle at 50% 35%, rgba(248, 113, 113, .3), rgba(5, 11, 16, .93) 70%); }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }
.k-res-inner { text-align: center; color: #F1F7FB; max-width: 560px; }
.k-res-photo { position: relative; width: 150px; height: 150px; margin: 0 auto 18px; }
.k-res-photo .avatar { width: 150px; height: 150px; font-size: 50px; border: 5px solid var(--brand); box-shadow: 0 10px 40px rgba(41, 170, 225, .45); }
.k-result.already .k-res-photo .avatar { border-color: #FBBF24; box-shadow: 0 10px 40px rgba(251, 191, 36, .35); }
.k-result.limit .k-res-photo .avatar { border-color: #F87171; box-shadow: 0 10px 40px rgba(248, 113, 113, .35); }
.k-res-badge {
  position: absolute; right: 2px; bottom: 6px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: #16A34A; color: #fff; border: 4px solid #0B1620;
}
.k-res-badge svg { width: 22px; height: 22px; stroke-width: 3; }
.k-result.already .k-res-badge { background: #D97706; }
.k-result.limit .k-res-badge { background: #DC2626; }
.k-res-hi { font-size: 20px; color: #A9C7DA; font-weight: 600; }
.k-res-name { font-size: 44px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 8px; }
.k-res-sub { color: #A9C7DA; font-size: 17px; }
.k-res-msg { margin-top: 16px; font-size: 22px; font-weight: 650; }
.k-res-chips { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.k-res-chips .chip { height: 34px; padding: 0 14px; font-size: 15px; background: rgba(255, 255, 255, .1); color: #EAF4FA; border-color: rgba(255, 255, 255, .15); }
.k-res-bar { margin: 22px auto 0; width: 220px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.k-res-bar span { display: block; height: 100%; background: var(--brand); transform-origin: left; animation: shrink linear forwards; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* stat tiles */
.k-today {
  background: linear-gradient(135deg, #0B6E9F 0%, #1594CF 55%, #29AAE1 100%); border-color: transparent; color: #fff;
}
.k-today .card-head h3, .k-today .card-head .sub { color: rgba(255, 255, 255, .85); }
.k-today .tile-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.k-today-num { font-size: 72px; font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.k-today-foot { color: rgba(255, 255, 255, .8) !important; margin-top: 8px; font-size: 14px; }
.k-mini .big { font-size: 34px; }
.k-mini .card-head { margin-bottom: 6px; }
.k-recent .row { padding: 8px 0; }
.k-recent .time { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.k-admin {
  position: fixed; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3); opacity: .35; transition: opacity .2s;
}
.k-admin:hover { opacity: 1; }

/* portrait screens / tablets */
@media (max-aspect-ratio: 1/1) {
  body.kiosk { overflow: auto; }
  .k-grid {
    height: auto; min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 58vh) auto auto auto;
    grid-template-areas: "head head" "cam cam" "today today" "week month" "recent hours";
  }
}
@media (max-width: 640px) {
  .k-grid { padding: 10px; gap: 10px; grid-template-areas: "head head" "cam cam" "today today" "week month" "recent recent" "hours hours"; }
  .k-title p, .k-logo-wrap { display: none; }
  .k-status { font-size: 15px; }
  .k-res-name { font-size: 32px; }
}
@media (max-height: 820px) and (min-aspect-ratio: 1/1) {
  .k-today-num { font-size: 56px; }
  .k-hours { display: none; }
  .k-grid { grid-template-areas: "head head head" "cam today today" "cam week month" "cam recent recent" "cam recent recent"; }
}