:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1c2430;
  --muted: #5b6775;
  --accent: #0f6e56;
  --line: #e4e8ee;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}
header {
  background: #0b3d33;
  color: #fff;
  padding: 20px 16px;
}
header .wrap, main, footer .wrap {
  max-width: 820px;
  margin: 0 auto;
}
header h1 { margin: 0 0 6px; font-size: 22px; }
header p { margin: 0; opacity: 0.85; font-size: 14px; }
nav { margin-top: 12px; }
nav a {
  color: #c8efe3;
  margin-right: 14px;
  text-decoration: none;
  font-size: 14px;
}
nav a:hover { text-decoration: underline; }
main {
  background: var(--card);
  margin: 24px auto;
  padding: 28px 24px 40px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}
h2 { font-size: 18px; margin-top: 28px; color: #0b3d33; }
h3 { font-size: 16px; }
.muted { color: var(--muted); font-size: 14px; }
.ar { direction: rtl; text-align: right; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 8px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="email"] {
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
}
button, .btn {
  display: inline-block;
  margin-top: 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.note {
  background: #eef8f4;
  border: 1px solid #cde8dc;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 16px 0;
}
.ok { color: #0f6e56; font-weight: 600; }
.err { color: #b42318; font-weight: 600; }
footer {
  padding: 24px 16px 40px;
  color: var(--muted);
  font-size: 13px;
}