:root{
  --bg:#0b1220;
  --card:#0f1a2f;
  --text:#e8eefc;
  --muted:#9fb0d0;
  --accent:#6ea8fe;
  --border:#203354;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
}
*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1100px 700px at 15% 10%, rgba(110,168,254,0.18) 0%, rgba(11,18,32,0.0) 55%),
              radial-gradient(900px 600px at 85% 0%, rgba(34,197,94,0.08) 0%, rgba(11,18,32,0.0) 45%),
              linear-gradient(180deg, #070c16 0%, #0b1220 100%);
  background-attachment: fixed;
}
.container{max-width:860px;margin:0 auto;padding:36px 18px}
.container-center{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px}
h1{margin:0 0 12px 0;font-size:28px;letter-spacing:-0.02em;text-align:center}
.card{
  width:100%;
  background: rgba(15, 26, 47, 0.55);
  border:1px solid rgba(32,51,84,0.85);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
.card-narrow{max-width:440px}
.label{display:block;margin:0 0 8px 0;color:rgba(159,176,208,0.92);font-size:13px}
.input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(32,51,84,0.9);background:rgba(10,20,40,0.75);color:var(--text);outline:none}
.input::placeholder{color:rgba(159,176,208,0.65)}
.input:focus{border-color:rgba(110,168,254,0.75);box-shadow:0 0 0 4px rgba(110,168,254,0.14)}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(110,168,254,0.8);
  background: linear-gradient(180deg, rgba(110,168,254,0.34), rgba(110,168,254,0.12));
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.01em;
}
.button:hover{filter:brightness(1.05)}
.button:active{transform:translateY(1px)}
.muted{margin-top:10px;color:rgba(159,176,208,0.85);font-size:13px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:14px}
.link{color:var(--accent);text-decoration:none}
.link:hover{text-decoration:underline}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(32,51,84,0.55)}
.row:last-child{border-bottom:none}
.price{font-size:18px;font-weight:700}
.badge{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#0a1428;color:var(--text);font-size:13px;text-transform:lowercase}
.badge-waiting{border-color:rgba(245,158,11,0.6);color:#ffd28a}
.badge-ready{border-color:rgba(34,197,94,0.6);color:#a7f3d0}
.badge-paid{border-color:rgba(34,197,94,0.8);color:#86efac}
.badge-expired{border-color:rgba(239,68,68,0.6);color:#fecaca}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 0;text-align:center}
.center .muted{text-align:center}
.title{font-size:18px;font-weight:800;margin-top:10px;letter-spacing:-0.01em}
.spinner{width:28px;height:28px;border-radius:999px;border:3px solid rgba(159,176,208,0.25);border-top-color:rgba(110,168,254,0.9);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.qrcode{display:flex;align-items:center;justify-content:center;align-self:center;max-width:100%;margin-top:14px}
.qrcode img,.qrcode canvas{display:block;background:white;padding:14px;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,0.35);max-width:72vw;height:auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}
.actions{display:flex;gap:10px;margin-top:12px}
.actions .button{width:50%;margin-top:0}
textarea.input{resize:vertical;min-height:110px}

.table-wrap{overflow:auto;border-radius:14px;border:1px solid rgba(32,51,84,0.7)}
.table{width:100%;border-collapse:collapse;min-width:760px;background:rgba(10,20,40,0.35)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid rgba(32,51,84,0.45);text-align:left;vertical-align:middle}
.table th{font-size:12px;color:rgba(159,176,208,0.92);font-weight:700;letter-spacing:0.02em;background:rgba(10,20,40,0.55)}
.table tr:hover td{background:rgba(110,168,254,0.06)}
.btn-small{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:10px;border:1px solid rgba(110,168,254,0.55);background:rgba(110,168,254,0.10);color:var(--text);text-decoration:none;cursor:pointer;font-weight:700;font-size:12px;line-height:1}
.btn-small:hover{filter:brightness(1.06)}
.btn-small:active{transform:translateY(1px)}
.btn-small-secondary{border-color:rgba(32,51,84,0.9);background:rgba(10,20,40,0.55)}
.btn-small-danger{border-color:rgba(239,68,68,0.55);background:rgba(239,68,68,0.10)}
.pill{display:inline-flex;gap:8px;align-items:center}

@media (max-width: 560px){
  .container{padding:28px 14px}
  h1{font-size:24px}
  .card{padding:16px;border-radius:16px}
  .topbar{flex-direction:column;align-items:flex-start}
  .row{flex-direction:column;align-items:flex-start}
  .actions{flex-direction:column}
  .actions .button{width:100%}
}