body{background:var(--paper);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.order-card{
  width:100%;max-width:520px;background:var(--paper-raised);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 30px;box-shadow:var(--shadow-md);
}
.order-card img{height:30px;margin-bottom:24px}
.order-state{display:none}
.order-state.active{display:block}

.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--blue);
  animation:spin 0.8s linear infinite;margin-bottom:18px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.order-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;margin-bottom:16px;
}
.order-badge.ok{background:#EAFBF2;color:var(--green)}
.order-badge.err{background:#FDEDEA;color:#C4392C}

.order-title{font-size:19px;font-weight:700;margin-bottom:14px}

.order-unlocked-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.order-unlocked-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border:1px solid var(--line);border-radius:8px;
  font-size:14.5px;font-weight:600;color:var(--blue-deep);background:var(--blue-tint);
}
.order-unlocked-list a:hover{border-color:var(--blue)}

.order-ref{
  font-family:monospace;font-size:12px;color:var(--ink-soft);
  background:var(--paper);padding:8px 10px;border-radius:6px;margin:14px 0;word-break:break-all;
}
.order-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}