/* Basic reset */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
}

/* Page shell */
body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #3a1f4d 0, #120816 55%, #050308 100%);
  color:#fdf7ff;
}

/* Centered card */
.shell{
  width:100%;
  max-width:720px;
  margin:2rem;
  padding:1.75rem 1.5rem 2rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.6));
  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    0 0 24px rgba(255,70,166,.25);
}

/* Headings */
h1{
  margin:0 0 .5rem;
  font-size:1.8rem;
  letter-spacing:.04em;
}

h2{
  margin:1.25rem 0 .4rem;
  font-size:1.1rem;
}

/* Text */
p{
  margin:.25rem 0;
  line-height:1.5;
  color:rgba(250,244,255,.9);
}

small{
  font-size:.8rem;
  opacity:.8;
}

/* Login form */
.login-form{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.login-row{
  display:flex;
  gap:.5rem;
}

.login-input{
  flex:1;
  padding:.55rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.4);
  color:#fdf7ff;
}

.login-input::placeholder{
  color:rgba(255,255,255,.5);
}

.btn{
  padding:.55rem 1.1rem;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,#ffe0f4,#f9a7cf);
  color:#1a0b0b;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.5);
  transition:transform .16s ease, box-shadow .16s ease, background .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.65);
}

/* Error message */
.login-error{
  margin-top:.3rem;
  color:#ffd4e0;
  font-size:.85rem;
}

/* Cockpit layout */
.cockpit-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.5rem;
}

.cockpit-badge{
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  font-size:.8rem;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  background:rgba(0,0,0,.35);
}

.cockpit-badge span{
  font-size:.9em;
}

/* Type selector buttons */
.cockpit-types{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:1rem 0 .6rem;
}

.cockpit-type-btn{
  padding:.35rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.45);
  color:#fdf7ff;
  font-size:.85rem;
  cursor:pointer;
}

.cockpit-type-btn.is-active{
  background:linear-gradient(180deg,#ffe1f6,#f8b5dc);
  color:#1a0b0b;
  border-color:#fff;
}

/* Form fields */
.cockpit-form{
  display:grid;
  gap:.7rem;
  margin-bottom:.8rem;
}

.cockpit-field label{
  display:block;
  font-size:.87rem;
  margin-bottom:.1rem;
  opacity:.9;
}

.cockpit-field input,
.cockpit-field textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.5);
  color:#fdf7ff;
  padding:.5rem .6rem;
  font:inherit;
}

.cockpit-field textarea{
  resize:vertical;
}

/* Output block */
.cockpit-output-block{
  margin-top:.4rem;
}

.cockpit-output-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem;
}

.cockpit-output-header h2{
  margin:0;
}

.cockpit-output-header p{
  margin:0;
  font-size:.85rem;
  opacity:.85;
}

.cockpit-output{
  margin-top:.3rem;
  width:100%;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.75);
  color:#fdf7ff;
  padding:.55rem .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.86rem;
  resize:vertical;
}

/* Tiny footer text */
.cockpit-notes{
  margin-top:.6rem;
  font-size:.85rem;
  opacity:.9;
}