:root{
  --glass: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.16);
  --ring: rgba(255, 255, 255, 0.35);
  --text: #e8f0ff;
  --muted:#b9c1d5;
  --danger:#ef4444;
  --pri:#5ac8fa;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 20px;
}

@font-face{
  font-family:'Alba';
  src:url('ALBA____.TTF') format('truetype');
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color: var(--text);
  background: url('image2.jpg') center/cover no-repeat fixed;
}

.shade{
  position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(10,12,18,.35), rgba(10,12,18,.7));
  pointer-events:none;
}

.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px 70px;
  text-align:center;
}

.card{
  max-width:520px;
  width:100%;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  padding:22px 20px 20px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at top, rgba(255,255,255,.22), transparent 60%);
  opacity:.18;
  pointer-events:none;
}

h1{
  font-family:'Alba', system-ui;
  font-size:26px;
  letter-spacing:.2px;
  margin-bottom:4px;
  position:relative;
  z-index:1;
}
.subtitle{
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
  position:relative;
  z-index:1;
}

.pill-row{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  white-space:nowrap;
}

#status-pill {
  order: 1;
}

#reason-pill {
  order: 2;
  flex: 1 1 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  margin-top: 4px;
}

.pill.danger{
  border-color: rgba(239,68,68,.7);
  background: rgba(239,68,68,.18);
  color:#fee2e2;
}

.pill.ok{
  border-color: rgba(34,197,94,.75);
  background: rgba(34,197,94,.20);
  color:#dcfce7;
}

.pill.warning{
  border-color: rgba(234,179,8,.75);
  background: rgba(234,179,8,.20);
  color:#fef9c3;
}

.pill.neutral{
  border-color: rgba(148,163,184,.75);
  background: rgba(148,163,184,.20);
  color:#e5e7eb;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.body-text{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}

ul.clean{
  list-style:none;
  margin:8px 0 14px;
  padding:0;
  font-size:12px;
  color:var(--muted);
  text-align:left;
}
ul.clean li{
  margin-bottom:4px;
}

.actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}

  .btn{
  all:unset; cursor:pointer;
  color:#fff;
  padding:8px 12px; border-radius:10px; font-size:13px;
  border:1px solid rgba(255,255,255,.08);
  transition:
  transform .12s ease,
  box-shadow .18s ease,
  border-color .18s ease,
  filter .18s ease;

  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  will-change: transform;
  transform: translateZ(0);
  white-space: nowrap;
    }
    .btn:hover{background:#adadad}
    .btn.ghost{background:transparent}
    .btn.ghost:hover{background: rgba(255,255,255,.06)}

    .btn:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  border-color: rgba(255,255,255,.14);
}

.btn:active{
  transform: translateY(0px) scale(.98);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.btn.ghost{
  background: transparent;
  box-shadow: none;
}

.btn.ghost:hover{
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.btn:focus-visible{
  border-color: rgba(90,200,250,.55);
  box-shadow: 0 0 0 6px rgba(90,200,250,.14), 0 12px 26px rgba(0,0,0,.24);
}

.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.25);
  transform: none !important;
  box-shadow: none !important;
}

.small{
  font-size:11px;
  color:var(--muted);
  position:relative;
  z-index:1;
}

.pulse{
  animation:pulse 0.6s ease-out;
}

     .footer {
  color: #fff;
  text-align: center;
  padding: 8px 0; 
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 35px 35px 0 0;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);

  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.37),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);

  transition: background-color 0.3s ease;
}

.footer a {
  color: #fff;
  text-decoration: none;
}
.footer a:hover{text-decoration:underline;}

@media (max-width:600px){
  .card{
    padding:18px 16px 18px;
  }
  h1{font-size:22px;}
}

.hidden { display:none !important; }

#qr-reader{
  width: 100%;
  max-width: 420px;
  margin: 12px auto 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
}
#qr-reader video{
  width: 100% !important;
  height: auto !important;
}

.pill.warning{
  border-color: rgba(234,179,8,.75);
  background: rgba(234,179,8,.20);
  color:#fef9c3;
}