@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f3f7f8;
  --card: #ffffff;
  --text: #13272e;
  --muted: #5f7780;
  --line: #dde7ea;
  --primary: #0e8a7e;
  --primary-dark: #0a6f65;
  --primary-soft: #e3f4f1;
  --accent: #ff8a5c;
  --danger: #d64545;
  --warn: #e0a126;
  --radius: 20px;
  --shadow: 0 10px 30px -12px rgba(19, 39, 46, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 14px 20px; font-weight: 700;
  background: var(--primary); color: #fff; transition: transform .1s, background .2s, opacity .2s;
  text-decoration: none;
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--primary-soft); color: var(--primary-dark); }
.btn.ghost:hover { background: #d3ede8; }
.btn.small { padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.btn.danger { background: #fbe9e9; color: var(--danger); }
.btn.danger:hover { background: #f6d6d6; }

.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fbfdfd; color: var(--text); outline: none; transition: border .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px);
  background: var(--text); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600;
  transition: transform .3s; z-index: 50; max-width: calc(100% - 32px);
}
.toast.show { transform: translateX(-50%) translateY(0); }