:root{
  --bg:#0b1020; --card:#121a33; --text:#e8ecff; --muted:#a9b3df;
  --line:rgba(255,255,255,.12); --brand:#4b7bff; --brand2:#24325e;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:grid; place-items:center;
  background: radial-gradient(1200px 600px at 20% 20%, #1a2a63, transparent),
              radial-gradient(1200px 600px at 80% 80%, #1f5aa6, transparent),
              var(--bg);
  color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.card{
  width:min(920px,92vw); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
h1{margin:0 0 6px;font-size:1.6rem}
h2{margin:18px 0 10px;font-size:1.15rem}
.sub{margin:0 0 16px;color:var(--muted)}
.label{display:block;margin:12px 0 6px;color:var(--muted);font-size:.95rem}
textarea,input,select{
  width:100%; background:rgba(0,0,0,.25); color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:12px; outline:none;
}
textarea:focus,input:focus,select:focus{border-color:rgba(75,123,255,.7)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.row{grid-template-columns:1fr}}
.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
button{
  border:0;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;
  color:white;background:var(--brand)
}
button.secondary{background:var(--brand2)}
button.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--text)}
button:disabled{opacity:.55;cursor:not-allowed}
.link{color:var(--muted);text-decoration:none}
.link:hover{text-decoration:underline}
.list{display:grid;gap:10px}
.item{
  display:flex;justify-content:space-between;align-items:center; gap:10px;
  padding:12px;border-radius:12px;border:1px solid var(--line);
  text-decoration:none;color:var(--text)
}
.item:hover{border-color:rgba(75,123,255,.7)}
.badge{font-size:.82rem;color:var(--muted)}
.out{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start
}
@media(max-width:760px){.out{grid-template-columns:1fr}}
.panel{
  padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.18)
}
.qrcode{
  width:320px;min-height:320px;display:grid;place-items:center;background:#fff;
  border-radius:16px;padding:12px
}
@media(max-width:760px){.qrcode{width:100%;min-height:260px}}
.hint{margin:0;color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.small{font-size:.9rem;color:var(--muted)}