:root {

  --bg: #f4f7fb;

  --card: #ffffff;

  --primary: #0b60a8;

  --muted: #6c7b89;

  --danger: #b00020;

}

* { box-sizing: border-box; }

body {

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  margin: 0; background: var(--bg); color: #0b2540;

}

.wrap {

  max-width: 900px; margin: 24px auto; padding: 18px;

}

header {

  display: flex; align-items: center; gap: 16px; margin-bottom: 12px;

}

header h1 {

  margin: 0; font-size: 1.4rem;

}

.muted {

  color: var(--muted); font-size: .92rem;

}

.card {

  background: var(--card); padding: 16px; border-radius: 8px;

  box-shadow: 0 4px 12px rgba(12,24,48,0.06); margin-bottom: 20px;

}

label {

  display: block; font-weight: 600; margin-top: 12px; margin-bottom: 4px;

}

input[type="text"], input[type="email"], select, textarea {

  width: 100%; padding: 10px; border: 1px solid #d7dde6; border-radius: 6px;

  font-size: .95rem;

}

textarea { min-height: 100px; resize: vertical; }

.row {

  display: flex; gap: 10px; margin-top: 16px;

}

button {

  background: var(--primary); color: white; border: none;

  padding: 10px 14px; border-radius: 6px; font-weight: 600; cursor: pointer;

}

button.secondary {

  background: #eef6ff; color: var(--primary); border: 1px solid rgba(11,96,168,0.12);

}

.list {

  margin-top: 14px; max-height: 400px; overflow: auto;

}

.item {

  border: 1px solid #e6eef8; padding: 12px; border-radius: 6px;

  margin-bottom: 10px; background: #fcfeff;

}

.meta {

  font-size: .85rem; color: #49607a;

}

.controls {

  display: flex; gap: 8px; margin-bottom: 10px;

}

@media (max-width: 700px) {

  .row { flex-direction: column; }

}