:root{
  --brand:#0056b3;
  --brand-700:#003d80;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --ok:#17823a;
  --danger:#b00020;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text)}

.wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:28px; width:100%; max-width:560px;
}
.logo{display:block;width:180px;max-width:70%;margin:0 auto 8px}
h1{text-align:center;margin:6px 0 16px}

.alert{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:14px}
.alert.success{background:#e8f9ef;color:var(--ok)}
.alert.error{background:#ffe8ea;color:var(--danger)}

.grid{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field span{font-size:13px;color:var(--muted)}
input, select{
  width:100%; padding:12px; border:1px solid #d1d5db; border-radius:10px;
  background:#fff; color:var(--text); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,86,179,.2) }

.time .row{display:flex;align-items:center;gap:8px}
.time input{max-width:110px;text-align:center}
.time .sep{color:var(--muted)}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:0;cursor:pointer;font-weight:700;text-decoration:none
}
.btn.primary{ background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(0,86,179,.25) }
.btn.primary:hover{ background:var(--brand-700) }
.btn.ghost{ background:#eef2ff; color:var(--brand) }
.btn.ghost:hover{ background:#e3e9ff }

@media (max-width:520px){
  .card{padding:22px;border-radius:12px}
  .logo{width:160px}
}