/* ── Modal Backdrop ── */
.f-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  animation: mfadeIn .2s ease;
}
.f-modal {
  background: linear-gradient(155deg, #1d2436, #131720);
  border: 1px solid rgba(255,255,255,.12); border-radius: 24px;
  width: 440px; max-height: 90vh; overflow-y: auto; padding: 26px 28px 24px;
  animation: mslideUp .3s cubic-bezier(.34,1.56,.64,1);
}
.f-modal::-webkit-scrollbar { width: 4px; }
.f-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Header */
.f-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.f-modal-title { color: #fff; font-weight: 900; font-size: 1.1rem; }
.f-close-btn {
  background: rgba(255,255,255,.07); border: 1px solid var(--border);
  border-radius: 8px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); transition: background .15s;
}
.f-close-btn:hover { background: rgba(255,255,255,.13); color: #fff; }

/* Form Fields */
.f-m-group { margin-bottom: 14px; }
.f-m-row { display: flex; gap: 10px; }
.f-m-row .f-m-group { flex: 1; }
.f-m-label {
  display: block; color: rgba(255,255,255,.45);
  font-size: .72rem; font-weight: 700; letter-spacing: .6px;
  margin-bottom: 6px; text-transform: uppercase; font-family: var(--font);
}
.f-m-field {
  width: 100%; background: rgba(255,255,255,.055);
  border: 1.5px solid rgba(255,255,255,.09); border-radius: 12px;
  padding: 11px 14px; color: #fff; font-family: var(--font);
  font-size: .9rem; outline: none; resize: none;
  transition: border-color .2s, box-shadow .2s;
}
.f-m-field:focus { border-color: #2de0c8; background: rgba(45,224,200,.07); box-shadow: 0 0 0 3px rgba(45,224,200,.12); }
.f-m-field::placeholder { color: rgba(255,255,255,.32); }
.f-m-field option { background: #1d2436; color: #fff; }
.f-m-field.err { border-color: rgba(255,107,107,.55); }

/* Type Toggle */
.f-type-toggle { display: flex; gap: 8px; }
.f-type-opt {
  flex: 1; padding: 10px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04);
  color: var(--muted); font-family: var(--font); font-size: .85rem;
  font-weight: 800; cursor: pointer; text-align: center; transition: all .2s;
}
.f-type-opt.loss  { border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.12); color: #ff6b6b; }
.f-type-opt.found { border-color: rgba(45,224,200,.5);  background: rgba(45,224,200,.1);  color: #2de0c8; }

/* Map picker */
.f-map-pick {
  height: 80px; background: linear-gradient(135deg, #0f2235, #0a1a2e);
  border-radius: 12px; border: 1.5px dashed rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  gap: 8px; color: var(--muted); font-size: .83rem; cursor: pointer;
  transition: border-color .2s; font-family: var(--font); font-weight: 600;
}
.f-map-pick:hover { border-color: rgba(45,224,200,.4); color: var(--teal); }

/* Image Upload */
.f-img-upload-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed rgba(255,255,255,.15); border-radius: 12px; padding: 20px;
  cursor: pointer; color: var(--muted); font-size: .85rem; font-family: var(--font);
  transition: border-color .2s, background .2s;
}
.f-img-upload-label:hover { border-color: var(--teal); background: rgba(45,224,200,.05); color: var(--teal); }
.f-img-input { display: none; }

/* Image Preview */
.f-img-preview-wrap { position: relative; display: inline-block; width: 100%; }
.f-img-preview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; display: block; }
.f-img-remove {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.55); border: none; border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; padding: 0; transition: background .2s;
}
.f-img-remove:hover { background: rgba(0,0,0,0.8); }

/* Hints & Errors */
.f-hint    { font-size: .72rem; color: var(--muted); margin-top: 4px; }
.f-err-msg { font-size: .78rem; color: var(--err);   margin-top: 5px; }

/* Submit Button */
.f-m-submit {
  width: 100%;
  background: linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0);
  background-size: 200% 100%; border: none; border-radius: 13px;
  padding: 14px; color: #082320; font-family: var(--font);
  font-size: 1rem; font-weight: 900; cursor: pointer; margin-top: 6px;
  animation: shimmer 3s linear infinite; transition: opacity .15s, transform .15s;
}
.f-m-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.f-m-submit:active:not(:disabled) { transform: translateY(0); }
.f-m-submit:disabled { opacity: .5; cursor: not-allowed; animation: none; background: #444; color: #aaa; }
.f-m-submit-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.f-m-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(8,35,32,.3); border-top-color: #082320;
  border-radius: 50%; animation: spin .7s linear infinite;
}

@media (max-width: 600px) {
  .f-modal-bg {
    align-items: flex-end;
  }

  .f-modal {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 32px; /* 32px снизу — отступ от home indicator */
  }
}