:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0f62fe;
  --radius:12px;
  --shadow: 0 6px 18px rgba(16,24,40,0.08);
  --fw-medium:500;
  --max-width:720px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#ffffff);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.container{
  width:100%;
  max-width:var(--max-width);
}

.header{
  text-align:center;
  margin-bottom:18px;
}
.title{
  margin:0;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:-0.2px;
}
.subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:0.95rem;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  margin-top:8px;
}

.form{display:flex;flex-direction:column;gap:12px}
.label{
  display:block;
  font-size:0.85rem;
  margin-bottom:6px;
  color:var(--muted);
  font-weight:var(--fw-medium);
}

.input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #e6e9ee;
  background:transparent;
  font-size:0.95rem;
  outline:none;
  transition:box-shadow .12s, border-color .12s;
}
.input:focus{
  border-color:rgba(15,98,254,0.18);
  box-shadow:0 6px 18px rgba(15,98,254,0.08);
}

.input--textarea{resize:vertical;min-height:56px}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
}

.btn{
  appearance:none;
  border:0;
  background:linear-gradient(180deg,var(--accent),#0657d6);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(15,98,254,0.12);
}
.btn:active{transform:translateY(1px)}
.status{
  color:var(--muted);
  font-size:0.9rem;
  margin:0;
  flex:1;
}

/* small screens */
@media (max-width:480px){
  :root{--max-width:420px}
  .title{font-size:1.15rem}
  .card{padding:16px}
}