:root {
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --green-hover: #256628;
  --bg: #f2f4f5;
  --card: #ffffff;
  --text: #1a1f1a;
  --muted: #5c6660;
  --border: #d6dcd7;
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10130f;
    --card: #191d17;
    --text: #eef1ec;
    --muted: #9aa39a;
    --border: #2c332b;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Noto Sans", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Мобилно-първо: страницата е самата карта, без отстъпи */
  padding:
    max(16px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

.card {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 18px 24px;
}

/* Заглавие */
.head { text-align: center; margin-bottom: 4px; }
.head h1 { margin: 0; font-size: clamp(1.7rem, 7vw, 2.2rem); letter-spacing: 0.5px; }
.sub { margin: 3px 0 0; color: var(--muted); font-size: 0.95rem; }
.school { margin: 6px 0 0; font-weight: 700; color: var(--green); }

.intro {
  margin: 16px 0 20px;
  padding: 13px 15px;
  background: rgba(46, 125, 50, 0.08);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--muted);
}

form { display: flex; flex-direction: column; gap: 16px; }

label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
}

input {
  font-family: inherit;
  font-size: 16px;              /* >=16px спира авто-зуума на iOS при фокус */
  padding: 14px 14px;
  min-height: 52px;            /* удобна цел за докосване */
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder { color: var(--muted); opacity: 0.65; font-weight: 400; }
input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
}
input[type="date"] { min-height: 52px; }

/* Размер + Клас един до друг, но се разгъват на много тесни екрани */
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row label { flex: 1 1 130px; }

.recipient {
  margin: 4px 0;
  padding: 12px 14px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.recipient strong { color: var(--text); }

/* Бутони */
.btn {
  font-family: inherit;
  font-weight: 700;
  width: 100%;
  min-height: 54px;
  padding: 15px 16px;
  border-radius: 13px;
  border: 1.5px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.06s, border-color 0.15s;
}
.btn:active { transform: scale(0.985); }

.btn-primary { background: var(--green); color: #fff; font-size: 1.1rem; }
.btn-secondary {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
  font-size: 1rem;
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  font-weight: 600;
}

/* Ховър ефекти само за устройства с истински курсор (не за телефони) */
@media (hover: hover) {
  .btn-primary:hover { background: var(--green-hover); }
  .btn-secondary:hover { background: rgba(46, 125, 50, 0.1); }
  .btn-ghost:hover { background: rgba(0, 0, 0, 0.05); }
}

.hint {
  margin: 4px 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--green);
  font-weight: 600;
}

/* На по-големи екрани добавяме рамка и сянка на картата */
@media (min-width: 600px) {
  body { display: flex; align-items: flex-start; justify-content: center; padding-top: 32px; }
  .card {
    border: 1px solid var(--border);
    padding: 30px 28px 32px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}