* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  background: #0f1115;
  color: #e6e6e6;
}
.topbar {
  padding: 16px 24px;
  border-bottom: 1px solid #24262c;
}
.brand {
  color: #e6e6e6;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
}
main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
}
h1 { margin-top: 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.card {
  background: #171a21;
  border: 1px solid #24262c;
  border-radius: 8px;
  padding: 16px;
}
.card h2 { margin: 0 0 8px; font-size: 16px; }
.card p { color: #9aa0aa; font-size: 14px; min-height: 40px; }
.btn {
  display: inline-block;
  background: #4f7cff;
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.btn-disabled { background: #333; color: #888; cursor: not-allowed; }
.link {
  display: inline-block;
  margin-left: 12px;
  color: #9aa0aa;
  font-size: 13px;
}
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 4px; font-size: 14px; color: #9aa0aa; }
.field input[type="text"], .field select {
  width: 100%;
  padding: 8px;
  background: #171a21;
  border: 1px solid #24262c;
  border-radius: 6px;
  color: #e6e6e6;
}
.warning { color: #e6b34f; }
#status-log {
  background: #171a21;
  border: 1px solid #24262c;
  border-radius: 6px;
  padding: 12px;
  white-space: pre-wrap;
  font-size: 13px;
  max-height: 300px;
  overflow-y: auto;
}
#output-frame {
  width: 100%;
  height: 800px;
  border: 1px solid #24262c;
  border-radius: 6px;
  background: white;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #24262c; font-size: 14px; }