* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Outfit', sans-serif; }
.hidden { display: none !important; }

body {
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, #edf2f8 52%, #e4ebf4 100%);
  color: #0f172a;
  min-height: 100vh;
}

.page { max-width: 1240px; margin: 0 auto; padding: 1.2rem; }

.layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }

.sidebar {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: fit-content;
}

.sidebar h2 { font-size: 1.25rem; margin-bottom: .2rem; }

.nav-btn {
  text-align: left;
  border: 1px solid #d0dbe8;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

.nav-btn.is-active {
  border-color: #8ec8ef;
  background: #eaf6fd;
  color: #075985;
}

.content {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  padding: 1rem;
}

.screen h3 { font-size: 1.35rem; margin-bottom: .25rem; }
.muted { color: #475569; font-size: .92rem; line-height: 1.45; }

.row { display: flex; gap: .6rem; align-items: center; margin-top: .8rem; }
.row.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: .8rem; margin-top: .8rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .9rem; }

.input {
  width: 100%;
  border: 1px solid #cfd8e5;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  font-size: .95rem;
  color: #0f172a;
}

.input:focus {
  outline: none;
  border-color: #89c8ef;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14);
}

.btn {
  border: 1px solid #c8d3e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-weight: 700;
  padding: 9px 13px;
  cursor: pointer;
  text-decoration: none;
}

.btn.primary {
  background: linear-gradient(100deg, #2458d8 0%, #19c8da 100%);
  color: #fff;
  border-color: rgba(37,99,235,0.35);
}

.btn.danger { color: #b91c1c; border-color: rgba(220,38,38,0.35); }

.btn:disabled { opacity: .6; cursor: not-allowed; }

.status {
  margin-top: .8rem;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d9e2ec;
  font-size: .9rem;
}

.status.hidden { display: none; }
.status.success { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #065f46; }
.status.error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #991b1b; }
.status.warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #92400e; }

.runtime-cards { margin-top: .8rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }

.card {
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  padding: .75rem;
  background: #f8fbff;
}

.card p { color: #64748b; font-size: .8rem; }
.card strong { font-size: .95rem; }

.box {
  border: 1px solid #d9e2ec;
  border-radius: 12px;
  padding: .8rem;
  margin-top: .8rem;
  background: #fbfdff;
}

.box legend { font-weight: 700; padding: 0 .3rem; }
.log { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-top: .3rem; resize: vertical; }

.site-footer { margin-top: 1rem; text-align: center; color: #475569; padding: .5rem 0; }
.site-footer a { color: #0f4fa8; text-decoration: none; margin: 0 10px; font-weight: 700; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .runtime-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: 1fr; }
}

/* Sticky footer layout */
.page {
  min-height: calc(100vh - 2.4rem);
  display: flex;
  flex-direction: column;
}

.layout {
  flex: 1;
}

.site-footer {
  text-align: initial;
}

.site-footer a {
  margin: 0;
}