/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa3b2;
  --accent:#7c5cff;
  --glass: rgba(255,255,255,0.04);
}

html,body{
  height:100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #071021 0%, #071228 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  color:#e6eef8;
}

.card{
  width:100%;
  max-width:880px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  padding:20px;
  border:1px solid rgba(255,255,255,0.03);
}

.card__header h1{
  font-size:1.25rem;
  margin-bottom:6px;
}

.subtitle{
  color:var(--muted);
  font-size:0.9rem;
  margin-bottom:12px;
}

.controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
  margin-bottom:16px;
}

.controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.85rem;
  color:var(--muted);
  min-width:160px;
}

.controls input{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:var(--glass);
  color:inherit;
  outline: none;
  transition: box-shadow .15s ease, transform .06s ease;
}
.controls input:focus{ box-shadow: 0 6px 18px rgba(124,92,255,0.12); transform: translateY(-1px); }

.buttons{ display:flex; gap:8px; align-items:center; }

button{
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  border:none;
  background: linear-gradient(90deg,var(--accent), #5e9bff);
  color:white;
  box-shadow: 0 8px 18px rgba(124,92,255,0.12);
}
button.secondary{
  background: transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
  box-shadow:none;
  font-weight:600;
}

.console-wrap{
  margin-top:12px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.02);
  background: linear-gradient(180deg, rgba(12,18,28,0.7), rgba(8,12,20,0.85));
}

.console-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,0.02);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
}
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.red{ background:#ff5f56; }
.yellow{ background:#ffbd2e; }
.green{ background:#27c93f; }
.console-title{ color:var(--muted); font-size:0.85rem; margin-left:auto; }

.console{
  padding:16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size:0.95rem;
  color:#dbe9ff;
  min-height:160px;
  max-height:360px;
  overflow:auto;
  line-height:1.55;
  background: transparent;
}

.card__footer{
  margin-top:12px;
  color:var(--muted);
  font-size:0.85rem;
  display:flex;
  justify-content:flex-end;
}
@media (max-width:640px){
  .controls{ flex-direction:column; align-items:stretch; }
  .buttons{ justify-content:flex-start; }
}