:root{
  --bg:#050816;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.10);
  --text:#e8eefc;
  --muted:rgba(232,238,252,.65);
  --accent:#7c3aed;
  --accent2:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --shadow: 0 20px 80px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%; width:100%; overflow-x:hidden}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(1000px 600px at 80% 40%, rgba(34,197,94,.18), transparent 55%),
              radial-gradient(800px 500px at 60% 90%, rgba(59,130,246,.15), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit}

.container{max-width:1100px;margin:0 auto;padding:18px 16px 44px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:14px;
  background: linear-gradient(135deg, rgba(124,58,237,.9), rgba(34,197,94,.85));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.logo:before{content:"";position:absolute;inset:-40px;transform:rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shine 4s linear infinite;
}
@keyframes shine{0%{left:-60%}100%{left:140%}}

.brand-title{display:flex;flex-direction:column;line-height:1.1}
.brand-title .t{font-weight:800;font-size:18px;letter-spacing:.2px}
.brand-title .s{color:var(--muted);font-size:12px}

.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn:active{transform:translateY(1px)}

.btnPrimary{background: rgba(124,58,237,.25);border-color: rgba(124,58,237,.35)}
.btnPrimary:hover{background: rgba(124,58,237,.35)}
.btnSuccess{background: rgba(34,197,94,.22);border-color: rgba(34,197,94,.35)}
.btnSuccess:hover{background: rgba(34,197,94,.34)}
.btnDanger{background: rgba(239,68,68,.20);border-color: rgba(239,68,68,.32)}
.btnDanger:hover{background: rgba(239,68,68,.32)}

.card{
  border:1px solid var(--stroke);
  background: var(--panel);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.cardHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px}
.cardTitle{font-weight:800;font-size:14px;letter-spacing:.2px}
.cardSub{color:var(--muted);font-size:12px}
.cardBody{padding:14px}

.grid3{display:grid;grid-template-columns:1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}

/* Allow children to shrink in CSS grid (prevents overflow on mobile) */
.grid2 > *, .grid3 > *{min-width:0}

@media (min-width: 820px){
  .container{padding:28px 18px 60px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:repeat(2,1fr)}
}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  border:1px solid var(--stroke);
  background: var(--panel2);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;color:var(--muted)}
.kv b{color:var(--text)}

.list{display:flex;flex-direction:column;gap:10px}
.item{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
}
.itemTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.itemTitle{font-weight:800;font-size:13px}
.badge{font-size:11px;font-weight:800;border-radius:999px;padding:6px 10px;border:1px solid var(--stroke);background:rgba(255,255,255,.06)}
.badgeLong{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.14)}
.badgeShort{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.14)}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.pre{
  max-height:260px;overflow:auto;
  background: rgba(0,0,0,.35);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  font-size:11px;
  color: rgba(232,238,252,.88);
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.notice{color:var(--muted);font-size:12px}

.hidden{display:none !important}