:root { --gap: 12px; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0b0f17;
  color: #e8eefc;
}
.header { padding: 18px 16px 6px; }
h1 { margin: 0; font-size: 22px; }
.sub { margin: 8px 0 0; opacity: .85; }
.version { margin-top: 10px; opacity: .8; font-size: 12px; }

.card {
  margin: 12px 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.label { display:block; margin-top: 10px; margin-bottom: 6px; opacity: .9; }
.input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: #e8eefc;
  outline: none;
}
.row { display:flex; gap: var(--gap); margin-top: 12px; }
.btn {
  flex: 1;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #e8eefc;
  font-size: 16px;
}
.btn:disabled { opacity: .45; }
.btn.primary { background: rgba(80,160,255,.2); }
.btn.success { background: rgba(80,255,160,.18); }
.btn.danger { background: rgba(255,80,120,.18); }

.stats {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  opacity: .95;
}
.pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,.25);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  min-height: 70px;
}
.footer { padding: 6px 12px 18px; opacity: .9; }
details summary { cursor: pointer; }
ul { margin: 10px 0 0 18px; }